Description not saving when using summernote - laravel

Question

I'm trying to create a page that when you click on the create product button
a modal pops up and then you enter whatever you like.
I'm using summernote as my WYSIWYG editor and I'm also using vue as my frontend.
The problem I'm having is that my description isn't being saved.
In my layouts.app I have summernote's cdn.
Here is my code
My Create.vue
<template>
<transition name="modal-fade">
<div>
<div class="modal-backdrop show"></div>
<div class="modal" style="display: inline;">
<div class="modal-dialog modal-dialog-scrollable" role="document" style="width: 680px; max-width: 680px;">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Create Product</h5>
<button type="button" class="close" #click="close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div>
<label>Name</label>
<input type="text" class="form-control" v-model="name">
</div>
<div class="mt-2">
<label>Description</label>
<textarea id="summernote" v-model="description"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" #click="close">Close</button>
<button type="button" class="btn btn-success" #click="save">Save</button>
</div>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
props: [],
data() {
return {
name: null,
description: null,
}
},
methods: {
close() {
this.$emit('close');
},
save() {
var description = document.getElementById("summernote").value;
axios.post('/admin/products', {
name: this.name,
description: description,
}).then((response) => {
});
}
},
mounted(){
$('#summernote').summernote();
}
}
</script>
<style>
.modal-fade-enter,
.modal-fade-leave-active {
opacity: 0;
}
.modal-fade-enter-active,
.modal-fade-leave-active {
transition: opacity .25s ease