title: Conditional form won't render when checkbox is unchecked, Safari bug (12.2). Works fine in Chrome and Firefox
body: <p>I have form with billing address and below a checkbox that by default sets shipping address to the same as the billing address. When the user un-checks the checkbox, the same form will be rendered below to set a different shipping address from the billing address.</p>
  
  <h3>checkbox</h3>
  
  <pre><code>         &lt;div class="col-full"&gt;
            &lt;checkbox
              v-model="shippingSameAsBilling"
              :label="$t('billingAddress.shippingSameAsBilling')"
              :disabled="false"
              name="shippingSameAsBilling"
            /&gt;
          &lt;/div&gt;
  </code></pre>
  
  <h3>conditional address-form</h3>
  
  <pre><code>      &lt;address-form
          v-if="!shippingSameAsBilling"
          :key="submissionAttempts"
          :address.sync="shippingAddress"
          :address-config="shippingAddressConfig"
          :countries="countriesAllowedForShipping"
          name="shippingAddress"
          data-test="shipping-address"
          @updateCountryCode="updateCountryCode"
        /&gt;
  </code></pre>
  
  <h3>property in state</h3>
  
  <pre><code>data() {
    return {
      shippingSameAsBilling: true
    }
   }
  </code></pre>
  
  <p>Everything works well in Chrome and Firefox, however, Safari 12.2 when you uncheck the checkbox, the form won't render. I am trying to use Safari web inspector and I'm stuck. I have no idea what the culprit can be.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div
      :data-test="name"
      :class="{ 'checkbox--disabled': disabled }"
      class="checkbox"&gt;
      &lt;input
        ref="checkbox"
        :id="name"
        :value="true"
        :name="name"
        :checked="value"
        :disabled="disabled"
        class="checkbox__input"
        type="checkbox"
        @input="input()"&gt;
      &lt;label
        :for="name"
        class="checkbox__label"
        tabindex="0"
        @keyup.space="toggle($event)"&gt;
        &lt;div&gt;
          &lt;div&gt;{{ label }}&lt;/div&gt;
          &lt;div
            v-if="subtext"
            class="checkbox__subtext"&gt;
            {{ subtext }}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/label&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'Checkbox',
    props: {
      /**
       * Disabled or not
       */
      disabled: {
        type: Boolean,
        default: false
      },
      /**
       * The label in front of the checkbox
       */
      label: {
        type: String,
        required: true
      },
      /**
       * The name of the element, used for testing and automation
       */
      name: {
        type: String,
        required: true
      },
      /**
       * Subtext rendered under the label
       */
      subtext: {
        type: String,
        default: ''
      },
      /**
       * The bound model object
       * @model
       */
      value: {
        type: Boolean,
        required: true
      }
    },
    methods: {
      input () {
        /**
         * Input event on change
         *
         * @event input
         * @type {Boolean}
         */
        this.$emit('input', this.$refs.checkbox.checked)
      },
      toggle () {
        const { checkbox } = this.$refs
  
        if (!this.disabled) {
          checkbox.checked = !checkbox.checked
        }
      }
    }
  }
  &lt;/script&gt;
  </code></pre>