События клавиатуры Vue.js не работают

Я пытаюсь создать пианино, которое будет играть ноту в зависимости от нажатой клавиши на клавиатуре. Пользователь щелкнет по вводу, и после щелчка, например, «а», он сыграет ноту C2. Мой текущий код не работает и не показывает никаких ошибок в консоли, поэтому мне было интересно, что я сделал не так. Я немного новичок в Vue.js

Вот HTML:

<input type = "text" v-on:keyup = "keyMonitor"/>

Вот файл JS:

var wrapper = new Vue({
el: '#wrapper',
data: {
notes: [
{key: 65, name: "C2.mp3"},
{key: 83, name: "D2.mp3"},
{key: 68, name: "E2.mp3"},
{key: 70, name: "F2.mp3"},
{key: 71, name: "G2.mp3"},
{key: 72, name: "A2.mp3"},
{key: 74, name: "B2.mp3"},
{key: 75, name: "C3.mp3"},
{key: 76, name: "D3.mp3"},
{key: 90, name: "E3.mp3"},
{key: 88, name: "F3.mp3"},
{key: 67, name: "G3.mp3"},
{key: 86, name: "A3.mp3"},
{key: 66, name: "B3.mp3"},
{key: 78, name: "C4.mp3"},
{key: 77, name: "D4.mp3"},
{key: 188, name: "E4.mp3"}
]
},
methods: {
playNote: function(note){
    if (note){
        var audio = new Audio(note);
        audio.play();

    }
},
keyMonitor: function(evt){
for(var key in wrapper.notes)
    if (evt.key == wrapper.notes.key){
        playNote(wrapper.notes.name);

    }
}

}

})