我在Vue.ja项目中有一个页面，您可以在其中将产品添加到JSON服务器的数据库中。但是，当我填写表单时，数据并没有改变。下面是代码：

<template>
    <form action="" @submit.prevent="submit">
        <input type="text" placeholder="Product Name" name="name" v-model="name">
        <input type="number" name="" id="" placeholder="Price in USD" v-model="price">
        <input type="button" value="Add Product">
    </form>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";

export default {
    name: "ProductCreate",
    setup() {
        const name = ref("");
        const price = ref("");
        const router = useRouter();

        const submit = async () => {
            await fetch("http://localhost:3000/products", {
                method: "POST",
                headers: { "Content-type": "application/json" },
                body: JSON.stringify({ id: (Math.random() * 10000000000000000n), name: name.value, price: price.value })
            });
            await router.push("admin/products");
        };

        return { name, price, submit };
    }
};
</script>

为什么不管用？