Problem with toggelling a GSAP anim in a watcher with state from vuex

Hi everyone,

I am trying to toggle an animation of an inline svg, as soon as a certain state retrieved from from vuex store changed. To do so I watch the state with a watcher and depending in the state I play the animation forward or backward. This works well, except after the first load of the app. When the watcher notices the change of the state the first time the svg jumps to the new position instead of animating. The second and all further toggles work well and animate smoothly. What am I missing?

Exemplary code:

<template>
  <div class="example">     <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none" aria-labelledby="menu" role="presentation">
 <line ref="top" x1="28" y1="18" x2="28" :y2="18"  stroke-width="2" stroke="currentColor"/>
</svg>
</div>
</template>

<script>
import { mapState } from 'vuex' 
import { TimelineLite} from 'gsap'
export default {
  name: 'AnimatedIconExample',
  computed: {
    ...mapState({
        isActive: state => state.userinterface.isActive
    })
  },
  data: function(){
    return {
      timeline:  new TimelineLite()
   },
  }
},
  watch: {
    isActive(newValue, oldValue){
        if(newValue){
             this.timeline.to( this.$refs.top, 0.3, { attr: {x1: 10, y1: 18, x2: 25, y2: 18 }})
               this.timeline.play()
        }else{
            this.timeline.reverse()
        }
     }
 }