从模板更新组件数据

Question

不太确定这里出了什么问题，对我来说似乎很好！当我单击组件中的输入时，我只是尝试将数据属性display更新为true。

我已经将数据传递到了插槽范围，所以看不到问题所在。它只是不会更新，使用一个函数来切换它就可以了，但是似乎并不是我真正想做的事。

<time-select>
    <div slot-scope="{ time }" class="is-inline-block">
        <label for="businessHoursTimeFrom"><i class="fas fa-clock"></i> From</label>
        <input type="text" name="businessHoursTimeFrom[]" v-model="time" v-on:click="display = true">
    </div>
</time-select>

背后的代码：

<template>
    <div>
        <p>{{ display }}</p>
        <slot :time="time" :display="display"></slot>
        <div class="picker" v-if="display">
            <p>Test</p>
        </div>
    </div>
</template>
<script>
    export default {
        props: [],
        data: function () {
            return {
                time: '',
                display: false
            }
        },
        mounted() {

        },
        methods: {

        }
    }
</script>