title: V-if not reactive in Vue template
body: <p>I have a button that I'm rendering with a Vue component. The button depends on some <code>async</code> data from the backend that controls its visibility. The data is being returned and updated fine. However, the button is not shown for some reason. I'm not sure if its because the DOM has already loaded? Not sure why I'm not seeing the button. I've tried both using a computed property as well as a simple data property and both don't work.</p>
  <p>However, the <code>console.log</code> IS showing the correct data at the correct time.</p>
  <p>Plus if I just set <code>displayLauncherButton</code> it displays fine.</p>
  <p>EDIT:
  To clarify this is a component that gets inserted into an HTML document that was rendered with liquid.</p>
  <p>Here is my simplified code:</p>
  <pre><code>Vue.component('fresh-credit', {
    data: function () {
      return {
        creditAmount: '',
        currencySymbol: '',
        customerId: '',
        displayLauncherButton: false,
      }
    },
    mounted() {
      this.getCustomerCredit
      this.makeItShow
    },
    template: 
      `
      &lt;div :style=&quot;buttonContainer&quot; v-if=&quot;makeItShow&quot;&gt;
        &lt;button 
          :style=&quot;buttonStyle&quot;
          &gt;You Have $&lt;/button&gt;
      &lt;/div&gt;
      `,
    computed: {
      makeItShow() {
        console.log(&quot;this is returning &quot; + this.displayLauncherButton)
        return this.displayLauncherButton
      },
      buttonContainer() {
        return {
          position: 'fixed',
          right: '10px',
          top: '150px',
          zIndex: '99999',
        }
      },
      buttonStyle() {
        return {
          'border-radius': '4px',
          'border': 'none',
          'height': '44px',
          'min-width': '78px',
          'padding': '0 19.5555555556px',
          'font-size': '14px',
          'font-weight': 'bold',
          'text-transform': 'uppercase',
          'cursor': 'pointer',
          'color': 'white',
          'background-color': '#4D4D4DFF',
          'box-shadow': '0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)!important',
          'outline': 'none',
        }
      },
      async getCustomerCredit() {
        if(this.customerId) {
          let response = await axios.post(`/apps/fresh_credit_proxy`, { shopify_customer_id: this.customerId, type: 'customer_credit'})
          if(response.status == 200) {
            if(response.data.customer_credit == 'no_credit') {
              this.displayLauncherButton = false
              return 
            }
            else {
              this.creditAmount = response.data.customer_credit.current_credit_balance
              this.currencySymbol = response.data.customer_credit.current_credit_balance
              this.displayLauncherButton = true
              console.log(&quot;during get credit &quot; + this.displayLauncherButton)
            }
          }
        }
      },
    },
  })
  
  new Vue({ el: '#freshie' })
  </code></pre>