JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>

<div id="app">
  <el-button @click="modals.dialogSignIn = true">SIGN IN</el-button>
  <el-button @click="modals.dialogSignUp = true">SIGN UP</el-button>

  <pre>{{ modals }}</pre>

  <el-dialog :visible="modals.dialogSignIn" @close="modals.dialogSignIn = false">
    SIGN IN
    <span slot="footer" class="dialog-footer">
      <el-button @click="modals.dialogSignIn = false">Закрыть</el-button>
    </span>
  </el-dialog>

  <el-dialog :visible.sync="modals.dialogSignUp">
    SIGN UP
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="modals.dialogSignUp = false">Ок</el-button>
      <el-button @click="modals.dialogSignUp = false">Отмена</el-button>
    </span>
  </el-dialog>
</div>

CSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

JavaScript

const store = new Vuex.Store({
  state: {
    modals: {
      dialogSignUp: false,
      dialogSignIn: false,
    },
  },
  mutations: {
    dialogShow: (state, payload) => Object.assign(state.modals, payload),
  },
});

new Vue({
  el: '#app',
  store,
  computed: {
    modals() {
      return new Proxy(this.$store.state.modals, {
        set: (target, prop, value) => {
          this.$store.commit('dialogShow', { [prop]: value });
          return true;
        },
      });
    },
  },
});