Vue Template not updating after data is changed - django

Question

I am new to Vue, and I have played around with small vue applications, but this is the first project I've done using vue and webpack (vue-cli).
I have a django rest API set up, for which I then use vue to consume the API and display the data. The issue i'm having is when I want to do anything the templates aren't updating. The data is loaded in correctly, but if I try and do a #click event and then a v-show (to toggle displaying an item) it doesn't change the view.
Example,
lets say I have a list of pubs that I consume from the API.
I get them via axios, and store them in the data function in a array called pubs:
<script>
import axios from 'axios'
export default {
name: 'Pubs',
data () {
return {
pubs: [
{
pub_id:'',
name:'',
address:'',
showPub: false,
},
]
}
},
created: function () {
this.loadPubs();
},
methods: {
loadPubs: function () {
var vm = this;
axios.get('http://127.0.0.1:8000/api/pubs/')
.then(function (response) {
vm.pubs = response.data;
vm.pubs.forEach(function (pub) {
pub.showPub = true;
});
console.log("loaded");
})
.catch(function (error) {
this.pubs = 'An error occured.' + error;
});
},
togglePub: function (pub) {
pub.showPub = !pub.showPub;
console.log(pub.showPub);
console.log(pub);
return pub;
},
}
}
</script>
The template could be:
<template>
<div class="pubs">
<h1>VuePubs</h1>
<ul>
<li v-for="pub in pubs">
<section>
<h2 #click="togglePub(pub)">{{ pub.name }}</h2>
<section v-show="pub.showPub">
<h3>{{ pub.address }}</h3>
<h3>{{ pub.postcode }}</h3>
<h3>{{ pub.showPub }}</h3>
</section>
</section>
</li>
</ul>
</div>
</template>
I can see that the data is changing in the model, thanks to the vue-dev tools, but the template doesn't change. The section doesn't hide and the h3 tags don't update with the new showPub field.
Any help would be greatly appreciated!