[Vuejs]-Vue reads v-bind:class before computed

Your problem is not that computed properties are calculated after the render cycle, but rather that you are using a computed property that tries to find an element that has not yet been rendered.

On the first render cycle, the component has not been rendered yet. It will loop through finalImages and try to set the class based on your computed property. Since nothing has been rendered yet, this.$refs is empty. Trying to get the length of that will result in “Cannot get property length of undefined”. One solution would be to not loop through the refs, but instead loop through finalImages to create your computed property. I am not 100% sure if it will recalculate the computed property based on this.$refs though, but there is only one way to figure that out.

animateHooks() {
  const refs = this.$refs.imageAnimate;

  return this.finalImages.map((image, index) => {
    const img = {
      start: refs ? refs[i].offsetTop : 0,
      end: refs ? (refs.offsetTop + refs[i].offsetHeight) : 0,
      animated: false
    };
    return img;
  });
}

You would be able to access the $refs one tick after the initial render (e.g. inside a this.$nextTick(() => { ... });), but this is of no use to you in a computed property.