Click @ only shows 8 item in the list, whereas i have 36

</Mentionable>

{{ text }}
</div>
</template>

<script>
import { Mentionable } from "vue-mention";

export default {
name: "App",
components: {
Mentionable,
},
data() {
return {
text: "",
items: [
{
value: "1st item",
label: "1st item",
},
{
value: "2nd item",
label: "2nd item",
},
{
value: "3rd item",
label: "3rd item",
},
{
value: "4th item",
label: "4th item",
},
{
value: "5th item",
label: "5th item",
},
{
value: "6th item",
label: "6th item",
},
{
value: "7th item",
label: "7th item",
},
{
value: "8th item",
label: "8th item",
},
{
value: "9th item",
label: "9th item",
},
{
value: "10th item",
label: "10th item",
},
{
value: "11ith item",
label: "11th item",
},
],
};
},
};
</script>

<style>
body {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 32px;
}

.input {
width: 100%;
}

.mention-item {
padding: 4px 10px;
border-radius: 4px;
}

.mention-selected {
background: rgb(192, 250, 153);
}
</style>
```