How to correctly call a component method from a Vue parent?

Question

Vue.js

There is a component with an input, in which, when one of its blocks is clicked, the type changes from password to text and vice versa, but when I do this, the error in the console is: "[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent
component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "type"

<template>

  <div class="input-root-wrapper"
       :class="{ 'has-error': invalid }"
  >
    <label class="input-label" :for="inputIdFront">

      <span
        v-if="labelText.length"
        class="input-label-text"
        :class="labelClass">
        {{labelText}}
      </span>

      <span class="input-wrapper">

        <span class="input-placeholder" v-if="showPlaceholder">
          {{placeholder}}
        </span>
        <span class="item-logo-pass-default" :class="{'item-logo-pass': itemPass}" @click="showPass()"></span>

        <input
          ref="input"
          @input="input"
          @change="change"
          @focus="focus"
          @blur="blur"
          :name="inputName"
          class="input"
          :id="inputIdFront"
          :type="type"
          placeholder=""
          :value="value"
          autocomplete="off"
          :class="{'item-logo-pass-input': itemPass}"
        >

      </span>

    </label>

  </div>

</template>

<script>
  import Inputmask from 'inputmask'
import {getRandomId} from '@/common-utils.js'

  export default{
    data () {
      return {
        inFocus: false,
        showPlaceholder: false,
        inputIdFront: ''
      }
    },
    props: {
      itemPass:{
        type: Boolean,
        default: false
      },
      value: {
        default: ''
      },
     
      invalid: {
        type: Boolean,
        default: false
      }

    },
    watch: {
      value (val) {
        this.showPlaceholder = !val
      }
    },
    methods: {
      showPass(){
        if(this.type == 'password') this.type = 'text'
        else this.type = 'password'
      },
      input: function (event) {
        this.$emit('input', event.target.value)
      },
      change: function (event) {
        this.$emit('change', event.target.value)
      },
      focus: function () {
        this.inFocus = true
        this.showPlaceholder = false
      },
      blur: function () {
        this.inFocus = false
        let strValue = this.value+''
         if (!strValue.length) {
          this.showPlaceholder = true
        }
      }

    }
</script>

here I use a component with the itemPass prop

<InputText
              :value="userPassword"
              :placeholder="'Новый пароль'"
              :labelText="'Пароль'"
              :type="'password'"
              :itemPass="true"
              @input="handleUserPassword($event)"
            ></InputText>

visually looks like this - by clicking on the eye - the type changes, but with an error

Answer 1

And here is the itemPass prop?
You are changing type. Although you didn’t describe it in the component’s property list, you passed it in fact and Vue knows about it.
In short, you have a prop type. Props cannot be changed from the inside, but you change. Here is your mistake.
change it

if(this.type == 'password') this.type = 'text'
        else this.type = 'password'

to generate events, catch this event from the outside and change the type from the outside.
ADF
Either do as Vue itself suggests in the error description
Add a computed property myType()
use it on the :type="myType" input
and change some internal flag without touching the external type property