Player renders but episode variable does not change

src/App.vue

@@ -1,15 +1,16 @@
 <template>
   <div id="app">
     <h3> Waveform. </h3>
+    <Waveform />
   </div>
 </template>
 
 <script>
-
-
+import Vue from "vue"
+import Waveform from "./components/Waveform.vue"
 export default {
   name: 'app',
-  components: {},
+  components: { Waveform },
   data() {return {}},
   methods: {},
   mounted() {}

src/components/Waveform.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+  <select v-model="selected" v-on:change="loadEpisode(selected)">
+    <option value="" disabled="" selected="" hidden="">Select an episode</option>
+    <option v-for="epp in episodes" :value="epp">{{ epp }}</option>
+  </select>
+  <av-bars :audio-src="episode"></av-bars>
+</div>
+</template>
+
+<script>
+import Vue from 'vue'
+import AudioVisual from 'vue-audio-visual'
+
+Vue.use(AudioVisual)
+export default {
+  components: {AudioVisual},
+  data() {
+    return {
+      selected: '',
+      episode: '',
+      episodes: [
+	'episode-14-violence-redux.mp3',
+	'episode-15-doing-the-dishes.mp3',
+	'episode-16-anarchist-responses-to-the-mainstream-nightmare.mp3',
+	'episode-17-activism-i.mp3',
+	'episode-18-memes-egocom.mp3',
+	'episode-20-dad-is-very-disappointed-in-you.mp3',
+	'episode-eigth-the-end-of-the-world.mp3'
+      ]
+    }
+  },
+  methods: {
+    loadEpisode(slug) {
+      const path = '/static/mp3/' + slug
+      console.log('selected episode: ', path)
+      this.episode = path
+      
+    }
+  },
+  mounted() {
+    console.log(this.episode)
+  }
+}
+
+</script>

src/index.js

@@ -1,11 +1,11 @@
-import Vue from "vue";
-import App from "./App.vue";
+import Vue from 'vue'
+import App from './App.vue'
 
 var vm = new Vue({
-  el: "#app",
-  template: "<App/>",
+  el: '#app',
+  template: '<App/>',
   components: { App },
-  render: h => h(App)
-});
+  render: createElement => createElement(App),
+})
 
-window.vue = vm;
+window.vue = vm