VueJS + jQuery: динамическое создание компонента в Vue.js

Я относительно новичок в этом деле. Vue.js, пытаясь создать компонент Vue на основе этого пользовательского меню выбора, и я хочу добавить ionicon к каждому элементу списка.

Обычно я могу создать иконку в Vue.js со следующей строкой (с соответствующими импортированными значками):

<component class="icon" :is="name-of-icon"></component>

Однако пользовательское меню выбора, которое я пытаюсь реплицировать, скрывает элемент select по умолчанию и динамически добавляет свои собственные элементы с пользовательским стилем CSS.

В результате этого следующее не является решением, поскольку оно требует, чтобы я использовал стиль select по умолчанию:

<option v-for="option in options" :value="option">
    <component class="icon" :is="icon"></component 
    <p>{{ option }}</p>
</option>

Вместо этого я попытался добавить значок с помощью jQuery, когда он стилизован. Помещая jQuery из вышеупомянутого пера в метод, style():

<template>
    <select>
        <option v-for="option in options" :value="option">
            {{ option }}
        </option>
    </select>
</template>
<script>
    import MdPersonIcon from 'vue-ionicons/dist/md-person.vue'

    export default {
        name: 'custom-select',
        components: {MdPersonIcon},
        methods: {
            style() {
                $('select').each(function () {

                    // rest of code from pen here

                    for (let i = 0; i < numberOfOptions; i++) {
                        let option = $('<li />', {
                            rel: $this.children('option').eq(i).val()
                        });
                        let text = $this.children('option').eq(i).text();
                        let $icon = $('<component>', {
                            'class': 'icon',
                            ':is': 'md-person-icon',
                        });
                        let $label = $('<p>', {
                            text: text
                        });

                        $icon.appendTo(option);
                        $label.appendTo(option);
                        option.appendTo($list);
                    }

                    // rest of code from pen here
                });
            }
        },
        mounted() {
            this.style();
        }
    }
</script>
<style>
    /* rest of CSS from the pen here */
    .icon {
        padding: 8px 8px 8px 0;
        margin: 0;
    }
</style>

И использование компонента being (где options-строковый массив):

<custom-select :options="options"></custom-select>

Создание значка в обычном режиме, а затем его проверка приводит к чему-то вроде:

<div class="ion profile-icon" data-title="Md Person Icon" data-name="md-person-icon" data-v-fc38bec4="">
    <svg viewBox="0 0 512 512" class="ion__svg">
        <path d="some long string"></path>
    </svg>
</div>

Компонент был заменен ionicon. Однако проверка элемента показывает, что компонент не был заменен:

<component class="icon" :is="md-person-icon"></component>

Я не совсем понимаю, почему это происходит.

Я знаю, что не должен пытаться смешивать jQuery и Vue, но в настоящее время я не могу придумать другого способа создания пользовательского компонента select menu Vue.