title: How to wait until modal is closed and continue execution based on either OK or CANCEL was clicked?
body: <p>Algorithm:</p>
  
  <ol>
  <li>I find the difference between two arrays of objects (what is new, what is deleted, renamed, etc). Differences are stored in <code>data[1-5]</code></li>
  <li>Based on #1 I prepare a text summary (objects of text) for a modal to 
  notify user what difference has been found. This summary is stored in <code>someDataToShowInModal</code>.</li>
  <li>When the difference is found the modal with the summary must be shown to a user. User should accept (click OK) or decline (click CANCEL) to apply changes.</li>
  <li><p><strong>QUESTION</strong>: How to wait until user clicks modal's OK or CANCEL 
  button?</p>
  
  <p>In the code I show two possible solutions, but do not know how to implement them:</p>
  
  <ol>
  <li><p>Wrap modal into Promise.</p></li>
  <li><p>Use <code>state.doSave</code> and somehow wait until it is changed by <code>myModalComponent</code>.</p></li>
  </ol></li>
  <li><p>Apply changes if user clicks OK.</p></li>
  </ol>
  
  <p>Below is pseudo-code which shows the logic I try to implement:</p>
  
  <p><strong>state.js</strong></p>
  
  <pre><code>modalTextSummary = {}
  </code></pre>
  
  <p><strong>action.js</strong></p>
  
  <pre><code>async myAction ({ state }) {
    let modalClosed
    let someDataToShowInModal = {}
  
    let data1 = []
    let data2 = []
    let data3 = []
    let data4 = []
    let data5 = []
  
    // #1. Push difference to "data[1-5]"
    data1.push(xyz1)
    data2.push(xyz2)
    data3.push(xyz3)
    data4.push(xyz4)
    data5.push(xyz5)
  
    // #2. Based on data[1-5] prepare "someDataToShowInModal"
    someDataToShowInModal = {xyz}
  
    // #3. We change "state.modalTextSummary" and by this we open
    // a Modal (because "myModalCompont" has "watch: {modalTextSummary}")
    state.modalTextSummary = someDataToShowInModal
  
    // #4. HOW TO WAIT UNTIL USER CLICKS Modal's "OK" or "CANCEL"?
  
    // v1:
    // something like...
    modalClosed = await myModalComponent
  
    // v2:
    // I can add "state.doSave = ''" which can be
    // set by "myModalComponent" to either 'OK' or 'CANCEL', but how
    // in this case I can wait for state changes?
    modalClosed = await state.doSave !== ''
  
    // #5. Apply changes
    if (modalCloses === 'OK') {
      // ... code which handles data from data[1-5]
    }
  }
  </code></pre>
  
  <p><strong>myModalComponent.js</strong></p>
  
  <pre><code>&lt;script&gt;
  import { mapState } from 'vuex'
  
  export default {
    computed: {
      ...mapState([
        'modalTextSummary'
      ])
    },
  
    watch: {
      modalTextSummary: function () {
        if (this.modalTextSummary !== {}) {
          // Here I show bootstrap-vue modal
        }
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I know how to call a function once a modal is closed by OK button, but in this case it is necessary to temporary save data[1-5] in vuex in order to pick them again inside a called function and I want to avoid it using a simpler approach.</p>