vue изменения в children компоненте не меняют родительский

шаблон

<form-search-component>

<div>
    <form-search-out-component />
</div>

</form-search-component>

компонент form-search-component

    <template>

    <slot />

</template>

<script>
import axios from 'axios';
import {ref, onMounted, provide, inject, computed} from 'vue'

export default {
    provide() {
        return {
            range: computed(() =>{return this.range}),
            formSubmit: this.formSubmit
        }
    },
    data() {
        return {
            range: 6,
        };
    },
    methods: {
        formSubmit(e) {
            e.preventDefault();
            alert(this.range)
        },

    },


}

</script>

компонент form-search-out-component

    <template >

    <div>

    <form @submit="formSubmit">
                            <div class="row">
                                <div class="col"><input v-model="range" /></div>
                                <div class="col"><input type="submit" class="btn btn-success" value="Search" /></div>
                            </div>
                        </form>

    </div>
</template>

<script>
import {computed, inject} from 'vue'

export default  {
    inject: ['range', 'formSubmit'],

}
</script>

При нажатии на субмит не передается range в родительский компонент. В общем значение в алерт не меняется