Vue js 2.6.13 component not rendering

Question

After upgrading vue js from v2.6.12 to v2.6.13 some components don't get render and no warning message or error message in the console. but when I try to downgrade to version 2.6.12, the component successfully render.

Component code that doesn't get render using v2.6.13

<script>
export default {
  props: {
    rules: {
      type: [String, Object],
      default: '',
    },
    name: {
      type: String,
      default: '',
    },
    vid: {
      type: String,
      default: undefined,
    },

    value: {
      type: [String, Number],
      default: '',
    },
    type: {
      type: String,
      default: 'text',
    },
    placeholder: {
      type: String,
      default: '',
    },
    label: {
      type: Boolean,
      default: false,
    },
    autocomplete: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    ariaLabel: {
      type: String,
      default: '',
    },
  },

  data: () => ({
    currentValue: '',
  }),

  computed: {
    isRequired() {
      if (this.rules.includes('required')) return true;
      return false;
    },
  },

  watch: {
    value: {
      handler(after) {
        this.currentValue = after;
      },
      immediate: true,
    },
  },

  methods: {
    handleInput() {
      this.$emit('input', this.currentValue);
    },
  },
};
</script>

<template>
  <ValidationProvider
    v-slot="{ errors }"
    tag="div"
    class="form-group"
    :rules="rules"
    :name="name"
    :vid="vid"
  >
    <label
      v-if="label"
      :for="name"
      class="form-label"
    >
      {{ name }}
    </label>

    <input
      :id="name"
      v-model="currentValue"
      :type="type"
      :class="['form-control', { 'is-invalid': errors[0] }]"
      :placeholder="placeholder"
      :autocomplete="autocomplete"
      :disabled="disabled"
      :aria-label="ariaLabel"
      @input="handleInput"
    >
    <span class="invalid-feedback">{{ errors[0] }}</span>

    <small class="form-help">
      <slot name="form-help" />
    </small>
  </ValidationProvider>
</template>

The code and try changing the vue version codesandbox, why is the component not rendering?

Answer 1

This was a regression introduced in 2.6.13 (tracked as vuejs/vue Issue #12102).

It's now fixed in 2.6.14, as seen in this demo.