title: How to change click event dynamically in VueJS
body: <p>When the B component finishes loading, I send an "emit" event to the A component via EventBus.</p>
  
  <p>And when event received from A component is "on", it changes the value of specific data to true.</p>
  
  <p>The value is registered in computed and can only be used with "a tag" if the value is true.</p>
  
  <p>But actually the value changes to true but the click event still returns "return false;"</p>
  
  <p>How to make click event behave dynamically in VueJS?</p>
  
  <p><strong>B Component</strong></p>
  
  <pre><code>...
  this.$EventBus.$emit("Loading");
  ...
  </code></pre>
  
  <p><strong>A Component</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;a href="javascript:void(0)" @click="completed ? btnFinish : 'return false;'"&gt;Complete&lt;/a&gt;
  &lt;/template&gt;
  &lt;script&gt;
      data() {
          return {
              loading: false,
          }
      },
      mounted() {
          this.$EventBus.$on('Loading', ()=&gt;{
              this.loading = true;
          });
      },
      computed: {
          completed() {
              return this.loading
          }
      }
  &lt;/script&gt;
  </code></pre>