Sorry for the confusion.
For explanation, given a stand-alone vue component like below, I can target both template elements (.my-class) AND the component's data (this.data.percent) :
<template>
<div class="my-class"> // animate with the first 'to' tween in mounted.
Lorem ipsum, dolor sit amet...
</div>
</template>
<script>
export default {
data () {
return {
percent: 0 // animate with the second 'to' tween in mounted.
}
},
mounted () {
var tl = this.$gsap.timeline()
tl.to('.my-class', { x: 1, duration: 2, ease: 'slow' }, '+=0.5')
tl.to(this.data, { percent: 1, duration: 1, ease: 'power2.in' }, '-=1')
}
}
</script>
However in the event bus, I have not found a way to manipulate the component's data (this.data.percent)
...