Vuex: Skipping Action and committing Mutation directly from Component

In your case it should be fine to commit the mutations directly in your components using ...mapMutations or $store instance.

Since you asked the best practice, The primary reason for the existence of Actions is Asynchronicity. Mutations cannot be asynchronous whereas Actions can be, while you can call $store.commit directly in a Component this will be a synchronous event, but when you call dispatch the commit can be handled asynchronously within the action block unlike Mutations.

So the best practice is to use Actions to commit modifications to your state when it has to be handled asynchronously say you need to do an API call before committing the state change in such cases it would be a good idea to use Actions.