How to prevent option to be deselected when pressed key enter in vue multiselect?

I have a component that uses Multiselect from @vueform/multiselect. The problem is when the user selects an option and the tag is created, if enter is pressed it will deselect that option. How am I able to control that? I tried adding @keydown.enter.prevent="deselect" but it doesn't work.

Here is how my component looks:

<template>
    <Multiselect
        v-model="propValue"
        :options="this.options"
        :placeholder=this.$filters.translate(this.placeholder)
        :closeOnSelect="false"
        :searchable="this.searchable"
        :noResultsText="$filters.translate(this.labels.noResult)"
        ref="multiselect"
        @change="change"
        @click="click"
        @deselect="remove"
        :mode="this.mode"
        :hideSelected='false'
        :max="this.limit">
        <template v-slot:caret>
            <img class="caretMultiselect" :src="filterIcon" alt="Filter">
        </template>
        <template v-slot:beforelist v-if="showWarning">
            <span class="beforeListContainer">
                <p class="beforeListWarningMessage">{{this.warningMessage}}</p>
            </span>
        </template>
    </Multiselect>
</template>
<script>
import Multiselect from '@vueform/multiselect';
import filter from '@/assets/filter.svg';

import { nextTick } from 'vue';

export default {
    components: {
        Multiselect,
    },
    props: {
        disabled: Boolean,
        placeholder: String,
        mode: {
            type: String,
            default: 'single'
        },
        showWarning: {
            type: Boolean,
            default: false
        },
        options: Object,
        value: Array,
        warningMessage: String,
        limit: Number
    },
    emits: ['change', 'reachedMax', 'removedTag'],
    data(){
        return {
            filterIcon: filter,
            labels: {
                noResult: 'No matching records'
            },
            propValue : this.value,
            searchable: true
        }
    },
    methods: {
        change(value) {
            this.propValue = value;
            this.$emit('change', value);
            if (this.propValue.length == this.limit) {
                nextTick(() => {
                    this.$refs["multiselect"].close();
                })
                return;
            } 
            this.searchable = true;

        },
        click(val) {
            if (this.propValue.length == this.limit) {
                this.searchable = false;
                for (let idx in this.options) {
                    if (this.options[idx].label == val.target.ariaLabel && !this.propValue.includes(this.options[idx].value)) {
                        this.$emit('reachedMax');
                    }
                }
            }
        },
        remove() {
            this.$emit('removedTag');
        }
    },
    watch: {
        options(current) {
            if (current.length !== 0) {
                for (let idx in this.propValue) {
                    let option = this.propValue[idx];
                    if (!current.some(e => e.value === option)) {
                        let index = this.propValue.indexOf(option);
                        index > -1 ? this.propValue.splice(index, 1) : '';
                        this.$emit('change', this.propValue);
                    }
                }
            }
        }
    }
}
</script>

Thanks in advance, appreciate the help.