Is it bad practice to modify state directly from multiple components?

[ChrisGV04]

Hi! I'm currently developing an app that uses Pinia stores extensively and as I was implementing a CRUD feature I had a situation that I don't know if it has any cons or performance issues.

Context

Lets say that I have a product store with something like this:

export const useProductStore = defineStore('product-store', {
  state: () => ({
    editor: {
      save: false,
      loading: false,
      mode: 'new' as 'new' | 'edit',
      product: defaultProduct as ProductDoc,
    },
  }),
  ...
});

Now, I have a product editor page that looks something like this:

Each block on that page is one of 3 separate components:

1. The main form on the left. This component handles the text fields of a product.
2. The status card on the top right. This only displays the createdAt/updatedAt and the "Save" button.
3. The selector card on the bottom right. This component is used to check which users are allowed to sell the product.

Since they are all separate components that use the same product, they share the state by connecting to the product store. Now, my question is...

Question

Is it okay to directly edit the state from multiple components using v-model so that when I click on the "Save" button, the store already has all of the changes in it? Something like this:

<script setup lang="ts">
const productStore = useProductStore()
</script>

<template>
  <form>
    <input type="text" v-model="productStore.editor.product.name" />
  </form>
</template>

My question mostly comes from the performance standpoint, since I'm not sure if changing the state directly from multiple separate components has bad performance, can make my page slower or is it just a bad practice with pinia.

I would really appreciate your ideas and suggestions!