title: Display vue component in laravel blade template
body: <p>I am doing a simple calculation in app.js. It just multiplies the product price by quantity. I want to display the total value in laravel, so a user can preview their order. </p>
  
  <p>app.js</p>
  
  <pre><code>const app = new Vue({
      el: '#item',
      data() {
          return {
              form: {
                  price: 0,
                  quantity: 0,
                  total: 0
              }
          }
      },
      methods: {
          updatePrice(event) {
              this.form.price = event.target.value;
              this.form.total = this.form.price * this.form.quantity
          },
          updateQuantity(event) {
              this.form.quantity = event.target.value;
              this.form.total = this.form.price * this.form.quantity
          }
      }
  </code></pre>
  
  <p>This is fine. They calculate the form value in blade file. But how I can display the total? </p>
  
  <p><a href="https://i.stack.imgur.com/guAIU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/guAIU.png" alt="total price"></a></p>
  
  <p>I want to display the '<code>total</code>' in blade file.  How can I access that? When I use <code>@{{ total }}</code> I get this error: </p>
  
  <blockquote>
    <p>app.js:36519 [Vue warn]: Property or method "total" is not defined on
    the instance but referenced during render. Make sure that this
    property is reactive, either in the data option, or for class-based
    components, by initializing the property.</p>
  </blockquote>