BAutoComplete arrow key selection doesn't work with computed data

[hchamre]

Overview of the problem

Buefy version: buefy-next 0.1.3
Vuejs version: 3.4.27
OS/Browser:

Description

When using a computed property as the data source for BAutoComplete, the arrow key selection doesn't work. The issue seems to be that the autocomplete component's selection variable is wrapped in a proxy, which changes how the item selected matches with those in the suggested list.

Steps to reproduce

1. Create a computed property that returns an array of objects.
2. Use the computed property as the data source for BAutoComplete.
3. Try to navigate through the suggestions using the arrow keys.

Expected behavior

The arrow key selection should work as expected.

Actual behavior

The arrow key selection doesn't work:

Screen.Recording.2024-06-07.at.16.17.19.mov

Code

src/App.vue:

<script setup>
import { computed, ref } from 'vue'

function getFruits() {
  return [
    { name: 'Apple', id: 1 },
    { name: 'Banana', id: 2 },
    { name: 'Orange', id: 3 },
    { name: 'Mango', id: 4 },
    { name: 'Grapes', id: 5 }, 
  ];
}

const suggestionsAsRef = ref(getFruits());

const suggestionsAsComputed = computed(getFruits);
</script>

<template>
  <section @keydown="onKeyDown">
    <!-- works -->
    <b-field label="Suggestions as ref">
      <b-autocomplete id="autocomplete" :data="suggestionsAsRef" field="name" />
    </b-field>
    <!-- doesn't work -->
    <b-field label="Suggestions as computed">
      <b-autocomplete id="autocomplete" :data="suggestionsAsComputed" field="name" />
    </b-field>
  </section>
</template>