I'm using Vue 3.2.4, Vuex 4.0.1 and Quasar 3.1.0 for this project.

I have created a custom component in vue as shown below:

<template>
  <q-input outlined v-model="inputValue" :label="label" />
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'RobsInput',
  props: {
    label: {
      type: String,
      required: true
    },
    value: {
      type: String,
      required: false
    }
  },
  emits: ['input'],
  data: function () {
    return {
      inputValue: (this.value
        ? this.value
        : ''),
      open: false
    }
  },
  mounted() {
    this.$emit('input', this.inputValue);
  },
})
</script>

I was then adding it to a page with some validation needed and pre-emptively added a rules property before actually adding this to my component, as shown here:

<robs-input
      v-model="email"
      label="Email Address"
      lazy-rules
      :rules="[ val => val && val.length > 0 || 'Email Address is Required']" />

What's really strange is that the lazy-rules and rules properties instantly began applying to the q-input inside my robs-input without me making any changes to the custom component itself.

Is Vue automatically adding properties to q-input because it's the only element within my component? Seems strange for it to do that, but I can't figure out what else is happening.

Thanks in advance for any answers to this.