Javascript 从父组件重置Vue计数器组件

我有一个Vue计数器，它从1计数到10。它作为一个组件实现。我需要从主应用程序重置计数器。最好的方法是什么？从我的示例中可以看出，watch方法不起作用：

Vue.component（'my-counter'{
模板：“#计数器vue”，
数据：函数（）{
返回{
现在的年龄：空
}
},
道具：{
年龄:数目
},
挂载：函数（）{
this.age_now=this.age；
TweenLite.to（this，10，{age_now:this.$root.age_end，roundProps:“age_now”，ease:Linear.easeNone}）；
},
观察：{
年龄（val）{
this.age_now=val；
}
}
});
var app=新的Vue({
el:“.container”，
数据：{
年龄:1,，
年龄(完):10
},
方法：{
重置（）{
这个年龄=1；
}	
}
});

年龄：{{Age_now}

Vue组件重置
重置
实现组件重置以从1重新开始计数到10的最佳方法是什么

首先，您的
我的计数器
组件中的
年龄
观察器从未启动，因为您从未更改
年龄
道具的值。如果它被初始化为
1
，并在单击处理程序中设置为
1
，则不会触发观察程序，因为该值没有更改

但第二，在这种情况下，将
reset
方法移动到
my counter
组件，然后通过
ref
从父作用域调用它更有意义，如下所示：

<my-counter ref="counter" :age="age"></my-counter>
<button @click.prevent="$refs.counter.reset">Reset</button>


年龄：{{Age_now}

Vue组件重置
重置
或者，您可以使用事件总线，将重置绑定到事件，然后单击按钮发出事件，但在这种情况下，这有点过分，非常清楚，非常有用，谢谢。我现在正在把它合并到我的代码中。似乎重新构造的Tween现在终止了组件上的enter-activecss转换。如果我不能解决这个问题，我会另发一个问题。