Accessing and Modifying vuejs Reactive State

const bricksState = document.querySelector("[data-v-app]").__vue_app__.config.globalProperties.$_state;

const newText = "This is the new heading!";

bricksState.content = bricksState.content.map(item => {
    if (item.id === "yhkunx") {
        return {
            ...item,
            settings: {
                ...item.settings,
                text: newText
            }
        };
    }
    return item;
});

Accessing the Global State: The bricksState variable taps into Bricks Builder’s global reactive state by selecting the root Vue application instance and accessing its custom $_state property.

Modifying Reactive Content: The code iterates over the content array within the state, identifies the item with the specific id (“yhkunx”), and updates its settings.text property to the new value. By reassigning the entire content array with the updated items, Vue’s reactivity system detects the change and updates the UI accordingly