如何用v-badge包裹组件且不压缩其原有宽度？

问题描述 #

当用v-badge包裹部分组件时，组件会丢失原有宽度。以v-text-field为例，示例代码如下：

<v-badge color="warning" icon="mdi-lock">
  <v-text-field label="lost width due to badge" />  
</v-badge>

实现效果如下：

尝试过的方案 #

我了解v-text-field提供了append插槽，尝试用该方案实现，示例代码如下：

<v-text-field label="field goes here">
  <template v-slot:append>
    <v-avatar color="warning" size="small">
      <v-icon icon="mdi-lock" />
    </v-avatar>
  </template>
</v-text-field>

但该实现的效果与需求不符，效果如下：

疑问 #

是否存在既能使用v-badge又不影响组件实际宽度的方法？

内容的提问来源于stack exchange，提问作者baitendbidz