Use GraphQL Mutations in Vue 3 with the useMutation Composable

The form can update state locally but changes don't persist. We need to take the mutation we wrote in GraphiQL and use it in our Vue app.

Using the useMutation composable, we pass it our gql and an arrow function that returns the variables. The variables are assigned to our updateFields object's properties.

After destructuring an update function off of useMutation, we define a handleSubmit function and call our update function inside. Then, we emit a close event and prevent the default behavior of the form.