How to interact with vue component from DOM tree?

Question

JavaScript

The logic is this: I have a separate vue js component in the project (basket).
On the page with the basket, there is respectively a basket and a form for submitting (which is not associated with a basket).
When submitting the form, a message about successful submission is shown. If it is sent successfully, I change the status and show the message

<template>
  <cart v-if="PRODUCTS.length && !isSubmit" />
  <cart-empty v-else-if="!PRODUCTS.length && !isSubmit" />
  <cart-submit v-else />
</template>
<script>
import cart from "./components/cart.vue";
import cartEmpty from "./components/cart-empty.vue";
import cartSubmit from "./components/cart-submit.vue";
import { mapActions, mapGetters } from "vuex";
export default {
  name: "app-cart",
  components: { cart, cartEmpty, cartSubmit },
  data() {
    return {
      isSubmit: false
    };
  },
  computed: {
    ...mapGetters(["PRODUCTS", "ID_STRING", "ID_ARRAY"])
  },
  methods: {
    ...mapActions([
      "SET_PRODUCTS_TO_STATE",
      "DEACTIVATE_CART_STATUS",
      "DELETE_ALL_PRODUCTS_FROM_CART",
      "SHOW_CART_FORM",
      "GET_ID_STRING_OF_PRODUCTS",
      "GET_ID_ARRAY_OF_PRODUCTS"
    ]),
    changeSubmitStatus() {
      let cartApp = document.querySelector("#cart-app");
      let formSubmitStatus = cartApp.getAttribute("data-is-submit");

      if (formSubmitStatus) {
        isSubmit = true;
      }
    }
  },
  mounted() {
    this.SHOW_CART_FORM();
    this.SET_PRODUCTS_TO_STATE();
    this.GET_ID_ARRAY_OF_PRODUCTS();
    this.GET_ID_STRING_OF_PRODUCTS();
    this.changeSubmitStatus();
  }
};
</script>

In the js of the site I have this function

function setSubmitButtonListener() {
    let cartForm = document.querySelector(".cart__form form");
    if (cartForm) cartForm.addEventListener("submit", showSuccessPopup);
  }

  function showSuccessPopup(event) {
    let cartApp = document.querySelector("#app-cart");
    let cartForm = document.querySelector(".cart__form form");

    cartApp.setAttribute("data-is-submit", true);
    cartForm.setAttribute("style", "display: none");
    document.querySelector(".wrap .cell-xl-8").classList.add("max-width");
    localStorage.removeItem("cart");
    event.preventDefault();
  }

  setSubmitButtonListener();

Whatever crutches I have tried, nothing works. How do I change the status from outside Vue.js?
Or maybe my logic is wrong? Tell me please

Answer 1

The logic is wrong. There are several options for solving varying degrees of crookedness:

• Connect the event bus (built into vue2 or some kind of mitt), subscribe to the event in the basket component, send the event to the bus in the right place from the outside.
  
• Make cart component data a module in vuex, from "elsewhere" set data using store instance directly
  
• In the case of vue3, you can export a reactive piece of data for the basket and use it in the basket component and from outside the component (this is a subspecies of the second option with storage)