Cannot Pass the Float from component to vue

I struggle a lot from this topic. I want to pass variable tmp_sell from AllProductsChoose component into QuoteAdd, the variable tmp_sell is really in component AllProductsChoose but when I try to pass the float, it only gives me 0? Here is the component (Click Here and will calculate the total sells value, dynmaic, some are 1000, some are 2000 tmp_sell will calculate the total)

<tr @click.prevent="choosenOneProduct($event,p, i);" @change="emitEventChanged">
<td> (Click Here) </td>
</tr>
...

choosenOneProduct(ev, p, i){
      var choose_product_ref =  firebase.firestore().collection("all_products").where("p_fullname", "==", p.p_fullname);
      choose_product_ref.onSnapshot((snapshot) => {

          snapshot.docs.forEach(d => {
              this.tmp_sell = this.tmp_sell + tmp_one_sell; //correct value
              this.$root.$emit('tmp_sell', this.tmp_sell);
          })
        })
    },

in my Main.vue

<input @change="getTmpSell" @tmp_sell="getTmpSell"  />

...
export default{

  props:['tmp_sell'],
  methods:{
    getTmpSell(dest){ 
      this.tmp_sell = dest; //nothing here as well.
      console.log('received value      ', dest); //nothing
      document.getElementById('q_subtotal').value = this.tmp_sell;
    }, 
  }
}

I want input tag q_subtotal will show the tmp_sell in the input field, I do props in Main.vue and this.tmp_sell works find on components? What things I miss to pass component variable to the Main.vue? Any help would appreciated.

Solution

Check the answers for Vue Component Basics:

Playground

const { createApp, ref } = Vue;

const QuoteAdd = {
  emits: ['update:modelValue'],
  props: { 
    modelValue: { 
      type: Number,
      required: true
    }
  },
  setup(props, context) {
    const choosenOneProduct = (event) => {
        context.emit('update:modelValue', props.modelValue + 1);
        
    }
    return { choosenOneProduct }
  },
  template: `<hr/><b>QuoteAdd</b><br/>
  modelValue: {{modelValue}}&nbsp;
  <button @click="choosenOneProduct($event);">+1</button>`
}

const App = {
 components: { QuoteAdd },
 setup() {
  const tmp_sell = ref(0)
  return  { tmp_sell }
 }
}

const app = createApp(App)
app.mount('#app')

#app { line-height: 1.75; }
[v-cloak] { display: none; }

<div id="app" v-cloak>
  <input type="number" v-model="tmp_sell" />
  <quote-add v-model="tmp_sell"></quote-add>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>