alpinejs, как добавлять и удалять элементы?

function init() {
  $('.content').summernote({
    height: 120,
    toolbar: [
      ['style', ['style']],
      ['font', ['fontname', 'fontsize', 'bold', 'underline', 'clear']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['table', ['table']],
      ['insert', ['link', 'lfm', 'video']],
      ['view', ['codeview', 'undo', 'redo', 'help']],
    ],
  });
}
init();

.section {
  border: 1px solid black;
  padding: 10px;
  margin-bottom: 10px;
}
.form-control {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.css" rel="stylesheet"/>
<script>
    let sections = [
    {id: 1, title: 'title1', content: 'content1'},
    {id: 2, title: 'title2', content: 'content2'},
  ];
</script>

<div class="wrap" x-data="{data: sections, currentIndex: sections.length-1, template: {id: null, title: '', content: ''} }">
    <div class="row mb-3">
      <div class="form-group">
        <button class="btn btn-success" @click.prevent="data.push(template);currentIndex++;setTimeout(function(){init()},100);console.log(data,currentIndex);">Add</button>
      </div>
    </div>
    <template x-for="(item, index) in data" :key="index">
      <div class="row mb-3 section">
        <input type="hidden" :name="'sections['+index+'][id]'" :value="item.id">
        
        <div class="col-12">
          <div class="form-group">
            <label>Title</label>
            <input type="text" class="form-control" :name="'sections['+index+'][title]'" :value="item.title">
          </div>
          <div class="form-group mb-3">
            <label>Content</label>
            <textarea class="form-control content" :name="'sections['+index+'][content]'"
                      :value="item.content"
                      >
            </textarea>
          </div>
          <div class="mb-3">
            <div class="form-group">
              <button class="btn" @click.prevent="data.splice(index, 1);currentIndex--;console.log(data,currentIndex);">Remove</button>
            </div>
          </div>
        </div>
      </div>
    </template>

  </div>