SVG animation on click event not working in Vue with anime.js

Question

I'm trying to implement an svg animation with anime.js based on click events and route changes. The first shape belongs to 'home' route and the second to 'about' route. The animation is a method in the Logo component, and it's called by clicking on router links in the parent component. If I use v-show for conditionally rendering the svg path the animation is working fine except on first load and after refreshing the page. The weird thing is, that the function is actually executing, it can be observed in devtools, too. If I use v-if the animation is working on first load and after reload, too, but it's glitching.

Logo.vue:

<template>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 1200" style="enable-background:new 0 0 1200 1200;" xml:space="preserve">
    <g>
      <path v-if="mypath=='Home'" class="morph-path1" :d="shapes[0].d"  />
      <path v-if="mypath !='Home'" class="morph-path1" :d="shapes[1].d" />
    </g>
  </svg>
</template>

<script>
export default {
    data(){
      return{
        mypath:this.$route.name,
        shapes: [
            {
                d: "M181.5,471.5c18.2-78.7,33.4-140.4,90-181c74.4-53.3,188.2-47,263,0c86.2,54.2,79.1,136.3,139,146c75.8,12.2,111.1-115.3,205-119c86.6-3.4,171.8,100.5,199,194c46.1,158.4-56.7,346.2-178,378c-120.6,31.6-173.7-113.2-357-115c-175-1.7-244.9,129.2-324,85C109.3,798.4,172.7,509.4,181.5,471.5z"
            },
            {
                d: "M207.5,399.5c18.7-45.4,67.8-164.7,186-189c115.6-23.7,243.9,54.6,266,144c19.8,80.1-56.2,126.7-31,181c41.2,88.9,262.8,3.5,335,98c65.9,86.2,4.1,317.8-165,394c-173.8,78.4-387.9-40.5-415-154c-17-71.1,44.6-118.5,13-176c-39.8-72.4-157.2-33-205-109C154.2,529.1,188.4,445.9,207.5,399.5z"
            }
        ]
      }
    },

    watch: {
      $route() {
        this.mypath=this.$route.name
      }
    },

    methods: {
    
      clickEvent(emitter){

        if(emitter=="home"){
          this.changeMorph({value: this.shapes[0].d});
        }else{
          this.changeMorph({value: this.shapes[1].d});
        }
        },

      changeMorph(shape) {
        this.$anime({
              targets: '.morph-path1',
              d: [
                  shape,
              ],
              duration: 1000,
              direction: 'alternate',
              autoplay: true,
              easing: 'linear',
              elasticity: 2000,
              loop: false
            });
      }
    },
}
</script>

<style>
svg {
  width: 400px;
  height: 400px;
  display: inline-block;
}
</style> 

App.vue:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/"  >
        <span @click="$refs.myChild.clickEvent('home')">Home</span>
      </router-link>
      <router-link to="/about"  >
        <span @click="$refs.myChild.clickEvent('about')">About</span>
      </router-link>
    </div>
    <Logo ref="myChild"/>
    <router-view/>
  </div>
</template>

<script>
import  Logo  from './components/Logo'

export default {
  name: 'App',
  components: {
    Logo
  }
}
</script>

I initially tried implementing it with Nuxt, results are the same, that version can be found here:

https://github.com/neblancsi/svg-morphing

https://svg-morphing.netlify.app/