<template>
  <div class="external">
    <div @click="sendMyProps" class="internal">
 ...
    </div>
  </div>
</template>

methods: {
    sendMyProps () {
      this.$router.push({ name: 'destiny', params: { menu: 'destiny' }})
    },

<template>
  <div>
    <External></External>
    <AnotherOne></AnotherOne>
    <AnotherTwo></AnotherTwo>
  </div>
</template>

<script>
import External from '@/components/External'
import AnotherOne from '@/components/AnotherOne'
import AnotherTwo from '@/components/AnotherTwo'


export default {
  name: 'Main',
  components: {
    External ,
    AnotherOne,
    AnotherTwo,
  }
}
</script>

{
  path: '/destiny',
  name: 'destiny',
  components: {
    default: Destiny,
    header: Header,
    footer: Footer
  },
  props: true
}

<template>

  <div class="finalComponent">
      <span @click="active = 'destiny'" :class="{ active: active ==='destiny' }">destiny</span>
      <span @click="active = 'blabla'" :class="{ active: active ==='blabla' }">ASpan</span>
...
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
...

export default {
  created () {
    this.aMethod()

  },
  mounted () {
    this.active = this.$props.menu
  },
...
  props: {
    menu: {
      type: String,
      required: true,
      default: 'house'
    }
  }
}
</script>