[Vuejs]-Vuejs Setting Dynamic path to template's src

One way to achieve dynamic templates being rendered is using dynamic component rendering:

App.vue:

<template>
  <div>
    <button @click="selectedComponent = 'app-quote'">Quote</button>
    <button @click="selectedComponent = 'app-author'">Author</button>
    <button @click="selectedComponent = 'app-new'">New</button>
    <hr>
    <component :is="selectedComponent"></component>
  </div>
</template>

<srcript>
  import Quote from './components/Quote.vue'
  import Author from './components/Author.vue'
  import New from './components/New.vue'

  data: function() {
    return {
      selectedComponent: 'app-quote'
    }
  },
  components: {
    'app-quote': Quote,
    'app-author': Author,
    'app-new': New
  }
</script>