Why doesn't the computed property work?

Question

Vue.js

I'm trying to make a custom list filter on input using the computed property. In one file I create a widget, in another I use it. Here is the code from the widget creation file:

<template>
            <input value="Гарантийный случай"
                           v-model="searchText"
                           :class="{'w-autocomplete__input_completed': completed}"
                           ref="input"
                           @click="areOptionsVisible = !areOptionsVisible"/>

           

            <div v-if="areOptionsVisible"
                 :style="{maxHeight: maxHeight, overflow: 'auto', zIndex: zIndex}"
                 class="w-autocomplete__items">
                <div v-for="option in options" class="w-autocomplete__item_first" >
                    {{ option.name }}

                        <div v-for="item in option.children" class="w-autocomplete__item"
                            :class="{'w-autocomplete__item_active': currentIndex === item}"
                            @mouseenter="setActive(item)"
                             @keyup.up="changeCurrent('up', item)"
                             @keyup.down="changeCurrent('down', item)"
                             @click="doChoose(item)">
                            {{ item.name }}
                        </div>
                </div>
            </div>
</template>

<script>
    export default {
        name: 'dropdown',
        props: {
            placeholder: {
                type: String,
                required: false,
                default: '',
            },
            options: {
                type: Array,
                default(){
                    return []
                }
            },
        },
        data: function () {
            return {
                counter: 0,
                currentIndex: null,
                completed: false,
                chosenItem: null,

                areOptionsVisible: false,

                searchText: '',

                data: [],

            }
        },
        computed: {
            options(){
                return this.props.options.filter(elem => {
                    return elem.name.toLowerCase().includes(this.searchText.toLowerCase());
                });
            },
        },

        .......
    }
</script>

This is how I pass an array to this list in another file:

<template>
  ........

  <div class="complaint-form__line-item">
                <div class="form-group">
                    <label>Гарантийный случай</label>
                    <dropdown  :options="options" />
                </div>
             </div>
 ........
</template>



<script>

    ........

    export default {
        name: 'complaint-form',
        components: {LockedImport, UploadFiles, CarNumberInput, Autocomplete, Dropdown},
        props: {
            ......
            }
        },
        data() {
            const complaint = new Complaint();

            return {
                ........

                options: [
                    {name: 'Выход детали из строя в процессе эксплуатации', value: null,
                        children: [{name: 'Увеличение зазора, люфт (дробь/стуки)', value: 53},
                                    {name: 'Обрыв детали', value: 54}]},

                    {name: 'Поломка при установке', value: null},

                    {name: 'Брак до установки', value: null,
                        children: [{name: 'Недокомплект', value: 55},
                                    {name: 'Заводской брак (замятия, отсутствие резьбы, пробой пыльника и т.д.)',
                                        value: 56}]},

                ],

            }
        },

Can you please tell me why computed does not work? Only I add computed and the list doesn't show up at all when clicking on the field, but it should. That is, it breaks down completely. I want to filter on text input in input

Answer 1

Same names in props and computed. Rename.

this.props.options

Where did you get it from? You don't need any props, you don't need react here.