Vue3中使用vue-draggable-next添加项时页面自动重载如何解决

在Vue3项目中使用拖拽组件时，为规避an draggable element must have an item slot报错选用了vue-draggable-next包，目前遇到异常：调用add方法新增列表项后页面会自动重载，需要定位问题根源并阻止该非预期重载行为。
完整组件代码如下：

<template>
  <div>
      <button class="btn btn-secondary button" @click="add">Add</button>
      <draggable tag="ul" :list="list" class="list-group" handle=".handle">
        <li
            class="list-group-item"
            v-for="(element, idx) in list"
            :key="element.name"
        >
          <i class="fa fa-align-justify handle"></i>
          <span class="text">{{ element.name }} </span>
          <input type="text" class="form-control" v-model="element.text" />
          <i class="fa fa-times close" @click="removeAt(idx)"></i>
        </li>
      </draggable>
    <rawDisplayer class="col-3" :value="list" title="List" />
  </div>
</template>

<script>
import { VueDraggableNext } from 'vue-draggable-next';
let id = 50;
export default {
  name: "handle",
  display: "Handle",
  instruction: "Drag using the handle icon",
  order: 5,
  components: {
    draggable: VueDraggableNext,
  },
  data() {
    return {
      list: [
        { name: "Navigation", text: "", id: 0 },
        { name: "Contact", text: "", id: 1 },
        { name: "Products", text: "", id: 2 },
      ],
      dragging: false
    };
  },
  computed: {
    draggingInfo() {
      return this.dragging ? "under drag" : "";
    }
  },
  methods: {
    removeAt(idx) {
      this.list.splice(idx, 1);
    },
    add() {
      id++;
      this.list.push({ name: "Navigation 2 " + id, id, text: "" });
    }
  }
};
</script>
<style scoped>
  .button {
    margin-top: 35px;
  }
  .handle {
    float: left;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .close {
    float: right;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  input {
    display: inline-block;
    width: 50%;
  }
  .text {
    margin: 20px;
  }
</style>

页面自动重载和vue-draggable-next组件本身无关，核心原因是<button>标签未显式指定type属性时，浏览器会默认将其识别为submit类型，点击时会触发表单提交的默认行为，最终导致页面重载。

给Add按钮显式添加type="button"属性，明确告知浏览器这是普通功能按钮，不需要触发提交行为即可，修改后的按钮代码如下：

<button type="button" class="btn btn-secondary button" @click="add">Add</button>

如果其他场景下遇到类似点击元素触发非预期重载的情况，也可以在事件回调中调用event.preventDefault()手动阻止默认行为，但当前场景直接指定按钮type是最符合规范的写法。

内容的提问来源于stack exchange，提问作者breking bed