Customize the display in an input [Vue.Js]

I have an input that must contain values according to the selected checkboxes, and I would customize the display on the input according to the checked checkbox.

I have initialized a watcher that updates the v-model of my input but the display is the following: my input : [Jhon,Eliott] While I would like to put a space in place of the comma. which gives: my input: [Jhon Eliott].

I created a codeSandBox which explains in more detail the desired result.

Code sandbox

Answer

Try to join values:

watch: {
  checkedOptions(newValue) {
    this.content = newValue.join(' ');
  },
},