Getting value to show up in my form when editing

I'm trying to create a reusable crud table and so far it's going ok. The issue come with an autocomplete package that I installed so that if my form needs to have an autocomplete to it it can have it, but the problem is, is that when I try to edit the row the autocomplete section doesn't show the already saved text. So for example in my form I have an autocomplete that has a list of countries, and after I've created a new row and I then want to edit the row, my selected country disappears.

I'm using Vue 3 and I'm using vue3-simple-typeahead for my autocomplete

Here is my code.

Index.vue

<template>
    <div>
        <CrudTable
            :headers="headers"
            :rows="rows"
            :countryOptions="countries"
            :formData="data"
            :actions="getActions"
            @editTableRow="saveUpdatedRow">
    </div>
</template>

<script>
    import CrudTable from "../../reusable/CrudTable.vue";

    export default{
        props: ['countries'],
        components: {
            CrudTable
        },
        data(){
            return {
                headers: [],
                rows: [],
                data: []
            }
        },
        computed: {
            getActions(){
                return [
                    {
                        icon: 'far fa-edit',
                        label: 'Edit',
                        style: 'btn-primary',
                        action: this.editRow,
                        edit: false
                    },
                ];
            }
        },
        methods: {
            getHeaders(){
                this.headers =  [
                    { field: 'name', label: 'Name' },
                    { field: 'address', label: 'Address' },
                    { field: 'country',  label: 'Country'}
                ]
            },
            getRows(){
                this.rows = [
                    {
                        field: 'name',
                        label: 'Name',
                        type: 'text'
                    },
                    {
                        field: 'address',
                        label: 'Address',
                        type: 'text
                    },
                    {
                        field: 'country',
                        label: 'Country',
                        type: 'autocomplete'
                    }
                ]
            },
            getDataRows(){
                axios.get(`/users`).then(response => {
                    response.data.forEach(data => {
                        this.dataRows.push({
                            id: data.id,
                            name: data.name,
                            address: data.address,
                            country: data.country
                        })
                    })
                });
            },  
            editRow(row, edit) {
                if(edit === false){
                    row.edit = false;
                }else{
                    row.edit = true;
                    row.role = row.role_id;
                }
            },
            saveUpdatedRow(payload){
                console.log('saveUpdatedRow', payload);
            }
        },
        mounted(){
            this.getHeaders();
            this.getRows();
        }
    }
</script>

and my CrudTable.vue

<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th v-for="h in headers" v-html="h.label"></th>
                    <th></th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="r in rows">
                    <td v-if="!r.edit" v-for="h in headers" v-html="renderTable(h, r)"></td>

                    <template v-for="h in headers">
                        <td v-if="r.edit">
                            <div v-for="form in formData">
                                <template v-if="form.field === h.field">
                                    <input
                                        v-if="form.type === 'text'"
                                        :type="form.type"
                                        :name="form.field"
                                        :id="form.field"
                                        :value="r[form.field]"
                                        :disabled="form.disabled"
                                        @change="editChanges(r.id, form.field, $event.target.value)"
                                        class="form-control">

                                    <simple-typeahead
                                        v-if="form.type === 'autocomplete'"
                                        class="form-control"
                                        id="typeahead_id"
                                        :items=countryOptions
                                        @onBlur="editChanges(r.id, form.field, $event.input)"
                                    >
                                    </simple-typeahead>
                                </template>

                                <div class="dropdown">
                                    <button class="btn btn-default" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="fa fa-ellipsis-h"></i>
                                    </button>
                                
                                    <ul class="dropdown-menu">
                                        <li v-for="a in actions">
                                            <a v-if="!a.edit && !r.edit" :class="dropdown-item" href="#" @click="a.action(r)">
                                                <i :class="a.icon"></i> {{ a.label }}
                                            </a>

                                            <a v-if="a.edit && r.edit" :class="dropdown-item" href="#" @click="a.action(r)">
                                                <i :class="a.icon"></i> {{ a.label }}
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </template>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    import SimpleTypeahead from 'vue3-simple-typeahead';
    import 'vue3-simple-typeahead/dist/vue3-simple-typeahead.css';

    const props = defineProps({
        headers: Array,
        rows: Array,
        countryOptions: Array
        formData: Array,
        actions: {
            type: Array,
            default: []
        },
    });

    const renderTable = (header, row) => {
        return row[header.field];
    }

    const editChanges = (id,fieldName, value) => {
        emit('editTableRow', {
            id: id,
            field: fieldName,
            value: value
        });
    }

</script>