v-on does not working why not receive $emit in custom component

Question

I'm create a an component which represents my money field. My target is on add element in list, set zero on money field to add next element in list... But, my problem is that not working when send using $emit event to clear input to improve usability. $emit works as described on image bellow

My money field:

<template>
  <div class="input-group" @clear="clearInputField()">
    <span>{{ title }}</span>
    <input ref="displayMoney" type="text" v-model="displayMoney" @focus="isActive = true" @blur="isActive = false" />
  </div>
</template>

<script>
export default {
  props: {
    title: String,
  },
  data() {
    return {
      money: 0,
      isActive: false,
    };
  },
  methods: {
    clearInputField() {
      console.log("Its work event");
      this.money = 0;
      this.displayMoney = "";
    },
  },
  computed: {
    displayMoney: {
      get: function () {
        if (this.isActive) {
          return this.money;
        } else {
          return this.money.toLocaleString("pt-br", { style: "currency", currency: "BRL" });
        }
      },
      set: function (modifiedMoney) {
        let newMoney = parseFloat(modifiedMoney.replace(/[^\d.]/g, "."));
        if (isNaN(newMoney) || newMoney.length == 0) {
          newMoney = 0;
        }
        this.$emit("input", newMoney);
        return (this.money = parseFloat(newMoney));
      },
    },
  },
};
</script>

My principal component

<template>
  <div class="wish-list">
    <div class="row">
      <div class="input-group">
        <span>Digite sua meta: </span>
        <input ref="descriptionWish" type="text" v-model="descriptionWish" />
      </div>
      <MoneyField title="Valor (R$): " v-model="valueWish" @keyup.native.enter="addWish" />
      <button id="btnCalculate" @click="addWish()">Adicionar a lista de desejos</button>
    </div>

    <div class="list-items">
      <ul>
        <li v-for="wish in wishes" :key="wish">{{ wish }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import MoneyField from "./Fields/MoneyField";
export default {
  components: {
    MoneyField,
  },

  data() {
    return {
      wishes: [],
      valueWish: 0,
      descriptionWish: "",
    };
  },
  methods: {
    addWish() {
      if (!isNaN(this.valueWish) && this.valueWish > 0 && this.descriptionWish.length > 0) {
        this.wishes.push(
          `${this.descriptionWish} => ${this.valueWish.toLocaleString("pt-BR", { currency: "BRl", style: "currency" })}`
        );
        this.descriptionWish = "";
        console.log("addWish");
        this.valueWish = 0;
        this.$emit("clear");
        this.$refs.descriptionWish.focus();
      }
      this.valueWish = 0;
    },
  },
};
</script>

I still don't understand much about vueJS, but I believe it's something related to parent and child elements, but I've done numerous and I can't get my answer.

sorry for my bad english .