How to bind change on text area to v-model value? - vuejs2

Question

I have this checkbox that will generate raw HTML on textarea, then generate whatever contain in textarea to the picture on top of the form, on that textarea, I want to be able to edit the text to customize the data position on the image.
The checkbox and the pic work fine, but when I edit data on the textarea, it reverts back, and of course, the rendered HTML reverts back too. And 1 more thing, I have to open the vue extension on inspecting menu to get all DOM rendered
Pic render code
<template>
<div class="card-item container-fluid mt--7">
<div class="card-item__cover">
<img v-if="form.img" :src="background" class="imageBackground" />
<div
v-if="previewImage"
class="imageBackground"
:style="{ 'background-image': `url(${previewImage})` }"
></div>
</div>
<span v-html="htmlBaru"></span>
</div>
</template>
Textarea
<div class="form-group">
<label class="col-form-label form-control-label">HTML</label>
<textarea
ref="htmlInput"
rows="4"
class="form-control col-sm-10"
v-model="htmlBaru"
#change="pantek"
></textarea>
</div>
Checkbox
checkboxCond() {
var sendKeyData = [];
var newHtml = [];
for (var a = 0; a < this.keyData.length; a++) {
if (this.keyData[a].status) {
newHtml.push(
`<tr>
<td >` +
this.keyData[a].key_readable +
` : {` +
this.keyData[a].key +
`}</td>
</tr>`
);
sendKeyData.push(this.keyData[a].key);
}
}
this.htmlBaru = this.html + newHtml.join("\r\n") + this.footer;
this.sendKeyData = sendKeyData;
console.log(this.htmlBaru);
// return this.htmlBaru;
}
Onchange
methods: {
pantek() {
// console.log(this.htmlBaru);
this.htmlBaru = this.$refs.target.value;
// this.$emit("change", this.htmlBaru);
},
}