title: VueJS 'if' function not working (Laravel Spark)
body: <p>I have tried editing the default register form in Laravel Spark to accommodate for a new design I have implemented. However, I am having some issues with the register page, where 'v-if' is not working and all page components are showing, like so:</p>
  
  <p><strong>Image:</strong> <a href="https://i.gyazo.com/2b00ac14ec441649c9951ba3e216ed0e.png" rel="nofollow noreferrer">https://i.gyazo.com/2b00ac14ec441649c9951ba3e216ed0e.png</a> (not allowed to post images directly).</p>
  
  <p>Here is my code for the layout blade (resources/views/vendor/spark/layouts/guest.blade.php):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;!-- Meta Information --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;!-- Page Title --&gt;
      &lt;title&gt;@yield('title', config('app.name'))&lt;/title&gt;
  
      &lt;!-- Material Design Icons  --&gt;
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  
      &lt;!-- Roboto Web Font --&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;amp;lang=en" rel="stylesheet"&gt;
  
      &lt;!-- MDK --&gt;
      &lt;link type="text/css" href="{{ asset('vendor/material-design-kit.css') }}" rel="stylesheet"&gt;
  
      &lt;!-- Sidebar Collapse --&gt;
      &lt;link type="text/css" href="{{ asset('vendor/sidebar-collapse.min.css') }}" rel="stylesheet"&gt;
  
      &lt;!-- App CSS --&gt;
      &lt;link type="text/css" href="{{ asset('css/style.min.css') }}" rel="stylesheet"&gt;
  
      &lt;!-- Sweetalert CSS --&gt;
      &lt;link href="/css/sweetalert.css" rel="stylesheet"&gt;
  
      &lt;!-- Extra Page Scripts --&gt;
      @yield('scripts', '')
  
      &lt;!-- Global Spark Object --&gt;
      &lt;script&gt;
          window.Spark = &lt;?php echo json_encode(array_merge(
              Spark::scriptVariables(), []
          )); ?&gt;;
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body class="@yield('body-class')"&gt;
      &lt;div id="spark-app" v-cloak&gt;
          &lt;div class="row"&gt;
              &lt;!-- Main Page Content --&gt;
              @yield('content')
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- jQuery --&gt;
      &lt;script src="{{ asset('vendor/jquery.min.js') }}"&gt;&lt;/script&gt;
  
      &lt;!-- Bootstrap --&gt;
      &lt;script src="{{ asset('vendor/tether.min.js') }}"&gt;&lt;/script&gt;
      &lt;script src="{{ asset('vendor/bootstrap.min.js') }}"&gt;&lt;/script&gt;
  
      &lt;!-- MDK --&gt;
      &lt;script src="{{ asset('vendor/dom-factory.js') }}"&gt;&lt;/script&gt;
      &lt;script src="{{ asset('vendor/material-design-kit.js') }}"&gt;&lt;/script&gt;
  
      &lt;!-- Sidebar Collapse --&gt;
      &lt;script src="{{ asset('vendor/sidebar-collapse.js') }}"&gt;&lt;/script&gt;
  
      &lt;!-- App JS --&gt;
      &lt;script src="{{ asset('js/main.min.js') }}"&gt;&lt;/script&gt;
  
      &lt;!-- Spark JS --&gt;
      &lt;script src="{{ mix('js/app.js') }}"&gt;&lt;/script&gt;
      &lt;script src="/js/sweetalert.min.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is the code for the register page itself's Blade (resources/views/vendor/spark/auth/register-spark.blade.php):</p>
  
  <pre><code>@extends('spark::layouts.guest')
  
  @section('title', 'Register')
  @section('body-class', 'register')
  
  @section('scripts')
      &lt;script src="https://js.stripe.com/v2/"&gt;&lt;/script&gt;
  @endsection
  
  @section('content')
  &lt;div class="row"&gt;
      &lt;spark-register-stripe inline-template&gt;
          &lt;div class="col-sm-8 push-sm-1 col-md-4 push-md-3 col-lg-4 push-lg-4"&gt;
  
              &lt;div class="text-xs-center m-2"&gt;
                  &lt;div class="icon-block rounded-circle"&gt;
                      &lt;i class="material-icons md-36 text-muted"&gt;edit&lt;/i&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div align="center"&gt;
                  &lt;h1&gt;Register&lt;/h1&gt;
              &lt;/div&gt;
  
              &lt;br /&gt;
  
              &lt;!-- Common Register Form Contents --&gt;
              @include('spark::auth.register-common')
  
              &lt;br /&gt;
  
              &lt;!-- Billing Information --&gt;
              &lt;div class="card" v-if="selectedPlan &amp;&amp; selectedPlan.price &gt; 0"&gt;
                  &lt;div class="card-header bg-white text-xs-center"&gt;
                      &lt;h4 class="card-title"&gt;Billing Information&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="p-2"&gt;
                      &lt;!-- Generic 500 Level Error Message / Stripe Threw Exception --&gt;
                      &lt;div class="alert alert-danger" v-if="registerForm.errors.has('form')"&gt;
                          We had trouble validating your card. It's possible your card provider is preventing
                          us from charging the card. Please contact your card provider or customer support.
                      &lt;/div&gt;
  
                      &lt;form role="form"&gt;
                          &lt;!-- Billing Address --&gt;
                          @if (Spark::collectsBillingAddress())
                              @include('spark::auth.register-address')
                          @endif
  
                          &lt;!-- Cardholder's Name --&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="name"&gt;Cardholder's Name&lt;/label&gt;
                              &lt;input type="text" class="form-control" name="name" id="name" placeholder="Cardholder's Name" v-model="cardForm.name"&gt;
                          &lt;/div&gt;
  
                          &lt;!-- Card Number --&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="number"&gt;Card Number&lt;/label&gt;
                              &lt;input type="text" class="form-control" name="number" id="number" placeholder="Card Number" data-stripe="number" v-model="cardForm.number"&gt;
  
                              &lt;small class="text-help" v-show="registerForm.errors.has('number')"&gt;
                                  @{{ registerForm.errors.get('number') }}
                              &lt;/small&gt;
                          &lt;/div&gt;
  
                          &lt;!-- Security Code (CVC) --&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="cvc"&gt;Security Code (CVC)&lt;/label&gt;
                              &lt;input type="text" class="form-control" name="cvc" id="cvc" placeholder="Security Code (CVC)" data-stripe="cvc" v-model="cardForm.cvc"&gt;
                          &lt;/div&gt;
  
                          &lt;!-- Expiration --&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label&gt;Card Expiration Date&lt;/label&gt;
  
                              &lt;div class="row"&gt;
                                  &lt;!-- Month --&gt;
                                  &lt;div class="col-md-6"&gt;
                                      &lt;input type="text" class="form-control" name="month" placeholder="Expiration Month (MM)" maxlength="2" data-stripe="exp-month" v-model="cardForm.month"&gt;
                                  &lt;/div&gt;
  
                                  &lt;!-- Year --&gt;
                                  &lt;div class="col-md-6"&gt;
                                      &lt;input type="text" class="form-control" name="year" placeholder="Expiration Year (YYYY)" maxlength="4" data-stripe="exp-year" v-model="cardForm.year"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;!-- ZIP/Postal Code --&gt;
                          &lt;div class="form-group" v-if=" ! spark.collectsBillingAddress"&gt;
                              &lt;label for="zip"&gt;ZIP/Postal Code&lt;/label&gt;
                              &lt;input type="text" class="form-control" name="zip" id="zip" placeholder="ZIP/Postal Code" v-model="registerForm.zip"&gt;
  
                              &lt;small class="text-help" v-show="registerForm.errors.has('zip')"&gt;
                                  @{{ registerForm.errors.get('zip') }}
                              &lt;/small&gt;
                          &lt;/div&gt;
  
                          &lt;!-- Coupon Code --&gt;
                          &lt;div class="form-group" v-if="query.coupon"&gt;
                              &lt;label for="coupon"&gt;Coupon Code&lt;/label&gt;
                              &lt;input type="text" class="form-control" name="coupon" id="coupon" placeholder="Coupon Code" v-model="registerForm.coupon"&gt;
  
                              &lt;small class="text-help" v-show="registerForm.errors.has('coupon')"&gt;
                                  @{{ registerForm.errors.get('coupon') }}
                              &lt;/small&gt;
                          &lt;/div&gt;
  
                          &lt;!-- Terms And Conditions --&gt;
                          &lt;div class="form-group"&gt;
                              &lt;div class="checkbox"&gt;
                                  &lt;label&gt;
                                      &lt;input type="checkbox" v-model="registerForm.terms"&gt;
                                      I Accept The &lt;a href="/terms" target="_blank"&gt;Terms Of Service&lt;/a&gt;
  
                                      &lt;small class="text-help" v-show="registerForm.errors.has('terms')"&gt;
                                          @{{ registerForm.errors.get('terms') }}
                                      &lt;/small&gt;
                                  &lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;!-- Tax / Price Information --&gt;
                          &lt;div class="form-group" v-if="spark.collectsEuropeanVat &amp;&amp; countryCollectsVat &amp;&amp; selectedPlan"&gt;
                              &lt;label class="col-md-4 control-label"&gt;&amp;nbsp;&lt;/label&gt;
  
                              &lt;div class="col-md-6"&gt;
                                  &lt;div class="alert alert-info" style="margin: 0;"&gt;
                                      &lt;strong&gt;Tax:&lt;/strong&gt; @{{ taxAmount(selectedPlan) | currency }}
                                      &lt;br&gt;&lt;br&gt;
                                      &lt;strong&gt;Total Price Including Tax:&lt;/strong&gt;
                                      @{{ priceWithTax(selectedPlan) | currency }} / @{{ selectedPlan.interval | capitalize }}
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;!-- Register Button --&gt;
                          &lt;div class="form-group" align="center"&gt;
                              &lt;button type="submit" class="btn btn-primary" @click.prevent="register" :disabled="registerForm.busy"&gt;
                                  &lt;span v-if="registerForm.busy"&gt;
                                      &lt;i class="fa fa-btn fa-spinner fa-spin"&gt;&lt;/i&gt;Registering
                                  &lt;/span&gt;
                                  &lt;span v-else&gt;
                                      &lt;i class="fa fa-btn fa-check-circle"&gt;&lt;/i&gt;Register
                                  &lt;/span&gt;
                              &lt;/button&gt;
                          &lt;/div&gt;
  
                          &lt;div class="text-xs-center"&gt;Already signed up? &lt;a href="guest-login.html"&gt;Log in&lt;/a&gt;&lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Plan Features Modal --&gt;
          @include('spark::modals.plan-details')
      &lt;/spark-register-stripe&gt;
  &lt;/div&gt;
  @endsection
  </code></pre>
  
  <p>If somebody could point me in the right direction, and let me know where I'm going wrong here it'd be much appreciated. Thanks!</p>