I don’t think that I mutate storage outside mutation handlers in my code
Although you do not change the state of the repository outside the mutation handlers, the mapboxgl.Map instance does.
var myMap = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v9', hash: true, center: [-74.0073, 40.7124], zoom: 16 })
Here you create an instance of the Map class, which has its own state (including a reference to the DOM element) and methods. This map instance will listen for DOM events (user interaction) and update its own state, violating the vuex rule.
My suggestion is that you should create a vue component for the map, as others have said. Since the map instance has a link to the DOM element <div id="map"> , for me it refers to the view layer, not the storage layer. Vue is a presentation-level environment and focuses on everything related to the DOM, and Vuex is a state management library that is best suited for the serializable state of the application (like JSON data) and should be separated from the actual DOM elements.
As for communication with other components, if this is a direct parent-child relationship, you can use the details / child links and event callbacks; otherwise, you can extract / copy a specific state (for example, scaling) from the map instance and save it in the vuex repository or use the global event bus,
As a side note, vue does not guarantee that it will work well with any libral that modifies the DOM. The user who uses such a lib is responsible for managing it, and lifecycle hooks are the best place for such things.