VueJS v-model in v-for not reactive - vue.js

Question

Consider the following:
<ul class="park-list row row-pd">
<li class="col-12" v-for="(item, index) in list.items" v-bind:key="index">
<div class="park-note px-3 py-2">
<p class="font-italic" >
{{ item.notes }} <a v-bind:href="'#collapseNoteTest'+item.id"
data-toggle="collapse" role="button" aria-expanded="false"
v-bind:aria-controls="'#collapseNoteTest'+item.id">
<i class="svg-12 ic-cyan-path" v-html="icons['ic-edit']"></i></a>
</p>
<div class="collapse" v-bind:id="'collapseNoteTest'+item.id">
<div class="form-group">
<label for="exampleFormControlTextarea1">Note:</label>
<textarea class="form-control" v-model="item.notes" rows="3"></textarea>
</div>
<div class="form-row">
<div class="col-auto ml-auto">
<button type="button" class="btn btn-outline-primary" v-bind:href="'#collapseNoteTest'+item.id" data-toggle="collapse">Cancel</button>
</div>
<div class="col-auto">
<button class="btn btn-success mb-2" v-bind:href="'#collapseNoteTest'+item.id" data-toggle="collapse">Save</button>
</div>
</div>
</div>
</div>
</li>
</ul>
No matter what I do here, item.notes does not update when I enter text into the textarea. What am I doing wrong?