子组件调用的方法参数滞后问题

我的问题是这样子的，子组件里有elementui的跑马灯，在父组件中点击手动切换,但是跑马灯每次切换的都是上一次点击应该出现的结果，即方法调用的参数的值是上一次传过来的值，就是旧值。(下面的例子没有在项目里跑起来，写了一个大概，主要讲一下怎么解决)

子组件children.vue

<template>
  <div class="block">
    <el-carousel height="150px">
      <el-carousel-item v-for="item in listData" :key="item.id" :name="item.name" ref:"carousel">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
export default{
  props:{index:String},
  method:{
    setIndex(){
      this.$refs.carousel.setActiveItem(this.index)
    }
  }
}
</script>

父组件：

<template>
  <div class="block">
    <children :index=toindex @click="tochange" ref="children"></children>
  </div>
</template>
<script>
import children from ‘./children’
export default{
  component:{
    children
  },
  data:{
  return {
  toindex:'name1'
  }
  },
  method:{
    click(item){
      this.toindex=item.name
      this.$refs.children.setIndex()
    }
  }
}
</script>

这时候就会出现开头我说的问题，子组件的index值是父组件toindex传过来的值，但总是旧值，导致手动切换跑马灯不一致的问题。

解决方案：
把子组件的方法setIndex改成：

setIndex () {
      setTimeout(() => {
        this.$refs.carousel.setActiveItem(this.index);
      }, 300)
    },

加了一个延迟的效果，这样就解决了。
在网上查了一下，意思是props加载的比较慢,就是method先调用了，这时候参数还没改变，所以调用的方法用的参数是旧值。
还可以这么改：

setIndex () {
       this.$nextTick(() => {
        // dom元素更新后执行
        this.$refs.remarkCarusel.setActiveItem(this.index);
      })
    },