组件中的动态自动完成

Question

我正在尝试制作某种购物清单，其中的行是具有自动完成功能的组件。

我的问题是建议与输入的距离有所增加，而不是在第一个组件上，而是在底部。

<tweet-component v-for="twItem in tweets" :tweetxxx="twItem" :sursadate="states" :key="twItem.id" />

和

Vue.component('tweet-component', {
  template: `
    <div>
        <input placeholder="Tweet your reply..." v-model="tweetxxx.selectat" />
         <v-autocomplete
          v-model="tweetxxx.selectat" item-text="nume" item-value="id"
          :items="sursadate"></v-autocomplete>
    </div> 
  `,
  props: {
    tweetxxx: Object,
    sursadate: Array
  }
});

只需尝试以下操作：https://codepen.io/catamaican/full/gygMdQ-第三或第四行，您就会明白我的意思。

如何纠正这种行为？

谢谢。