Perform editing with vuejs modal

The title is just a simple intro to what the real problem is, basically i have a dashboard with a lot of elements (example: table, paragraph, heading) this elements are respective to a construction of a docx document.

Everytime i click one of these elements i open a new modal, where i can change some parameters in order to create the element, for example with paragraph i can change his alignment, color and text.

When i click to add this element it is added to a section in my page as a block and i should be able to change the properties of each block by clicking above the block.

I want to open a new modal(something like the modal when i open in the dashboard, with the difference instead of adding, to edit).

My problem is that i don't know what is the best way to do this without having messy spaghetti code.

At the moment i am building it this way:

i have the dashboard component that is like this:

<template>
    <div class="navbar navbar-custom navbar-fixed-left navSize">
        <form class="navbar-form margin-above" role="search">
            <div class="input-group add-on">
                <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
            </div>
        </form>
        <h4 class="text-center">Doc Sections</h4>
        <div @click="changeView('appTable')" class="card card-color">
            <div class="card-block">
                <h4 class="card-title text-center">Table</h4>
            </div>
        </div>

        <div @click="changeView('appParagraph')" class="card card-color">
            <div class="card-block">
                <h4 class="card-title text-center">Paragraph</h4>
            </div>
        </div>
        <div @click="changeView('appImage')" class="card card-color">
            <div class="card-block">
                <h4 class="card-title text-center">Image</h4>
            </div>
        </div>
        <div @click="changeView('appBulletList')" class="card card-color">
            <div class="card-block">
                <h4 class="card-title text-center">Bullet List</h4>
            </div>
        </div>
        <div @click="changeView('appHeading')" class="card card-color">
            <div class="card-block">
                <h4 class="card-title text-center">Heading</h4>
            </div>
        </div>
        <div @click="changeView('appBreak')" class="card card-color">
            <div class="card-block">
                <h4 class="card-title text-center">Break</h4>
            </div>
        </div>
    </div>
</template>


<script>

export default {
    data() {
        return {
            text: "",
            fontSize: 14,
            key: "Paragraph",
            paragraph: {},

        }
    },
    methods: {
        addParagraph() {
            this.$set(this.paragraph, 'key', this.key);
            this.$set(this.paragraph, 'text', this.text);
            this.$set(this.paragraph, 'fontSize', this.fontSize);
            this.$store.commit("appendToDocument", this.paragraph)
        },
        changeView: function (view) {
            this.$store.commit("changeCurrentView", view);
            this.show();
        },
        show() {
            this.$modal.show('modalSection');
        },
        hide() {
            this.$modal.hide('modalSection');
        },
        hey() {
            console.log("HEY");
        }
    },
}
</script>

the change view sends to vuex the new component that should render the modal, i have this at vuex store:

 currentView: 'appTable',



  changeCurrentView: (state, view) => {
        state.currentView = view;
    },

in my create file template is the place where i render the component that i click, like this:

 <modal name="modalSection">
        <component :is="getView">
        </component>
    </modal>

computed:{
    getView(){
        return this.$store.getters.getCurrentView;
    }
},

again, i access vuex for the currentView clicked and change the component rendered. In this page i also load the components to be displayed but i think the important part about how it works is already showed, each component has its own properties inside, for example Table is 1 component with his properties inside it, like(number of rows, columns).

Do i need to pass all this properties from all my components to vuex? so i can edit them in other component. Or is there a better way?

Thank you guys