cant get multiple methods in vuejs instance to work - vue.js

Question

I have two v-on:click events attached to html elements. the one calling method1 works but the other one doesnt work. i cant imagine what the issue is. i have no errors in the console
heres the the entire html page.
<div class="col-md-10" id="deckBuilder">
<button class="ClassTabs" id="classCardsTab">"#ViewData["ClassChoice"]"</button>
<button class="ClassTabs" id="neutralCardsTab">Neutral</button>
<div class="well col-md-9" id="classCards">
#foreach (var card in Model.ClassCards)
{
<img v-on:click="addCard" class="card" id="#card.CardID;#card.Name" style="width:200px;height:260px;" src="#Url.Content(card.Image)" alt="#card.Name" />
}
</div>
<div class="well col-md-3" id="tableWrapper">
<table id="deckTable">
<tr>
<th colspan="3" style="font-size:24px;"><input style="text-align:center;" placeholder="My #ViewData["ClassChoice"] Deck" v-model="deckName" /></th>
</tr>
<tr>
<th style="text-align:center;font-size:20px;">Name</th>
<th style="text-align:center;font-size:20px;">Count</th>
<th></th>
</tr>
</table>
</div>
<div class="well col-md-9" id="neutralCards">
#foreach (var item in Model.NeutralCards)
{
<img v-on:click="addCard" class="card" id="#item.CardID;#item.Name" style="width:200px;height:260px;" src="#Url.Content(item.Image)" alt="#item.Name" />
}
</div>
</div>
#section Scripts {
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var deckBuilder = new Vue({
el: '#deckBuilder',
data: {
deckList: [],
deckCards: 0,
deckName: ''
},
methods: {
addCard: function(event) {
var count = 0;
var foundCard = false;
var cardInfo = event.path[0].id.split(';');
var cardId = cardInfo[0];
var cardName = cardInfo[1];
var deckTable = document.getElementById('deckTable');
var row;
for (var i = 0; i < this.deckList.length; i++) {
if (this.deckList[i].id === cardId && this.deckList[i].count < 3 && this.deckCards < 30) {
this.deckList[i].count++;
foundCard = true;
this.deckCards++;
for (var x = 0; x < deckTable.rows.length; x++) {
if (deckTable.rows[x].id === cardId) {
deckTable.rows[x].cells[1].innerHTML = this.deckList[i].count;
break;
}
}
break;
} else if (this.deckList[i].id === cardId && this.deckList[i].count === 3 && this.deckCards < 30) {
alert('Deck limit reached for this card.');
foundCard = true;
break;
}
}
if ((this.deckList.length === 0 || !foundCard) && this.deckCards < 30) {
this.deckList.push({ id: cardId, count: 1 });
this.deckCards++;
row = deckTable.insertRow(-1);
row.insertCell(0).innerHTML = '<a class="cardLink" href="#Url.Action("Details", "Cards")/' + cardId + '" >' + cardName + '</a>';
row.insertCell(1).innerHTML = 1;
row.insertCell(2).innerHTML = '<button v-on:click="removeCard">X</button>';
row.id = cardId;
}
console.log(this.deckCards);
},
removeCard: function (event) {
console.log("remove card");
}
}
})
</script>
}

Answer 1

You could try writing it like this:
var vueInstanct = new Vue({
el: "#myVueInstance",
methods: {
method1() {
console.log('method1 hit');
},
method2() {
console.log('method2 hit');
}
}
})
But there doesn't seem to be anything wrong with your code... maybe post the html elements these methods are attached to? Could be something there.