获取动态呈现的Vue.js下拉列表以使用Select2库

Question

我是一个新的Vue所以请原谅我如果这是一个简单的问题。我有一个页面，动态呈现一个select下拉菜单，并根据一个名为filteredWidgets的计算属性动态填充它的选项，该属性取决于用户在其他下拉菜单中所做的选择。标记如下所示：

<div v-if="filteredWidgets.length > 0">
 <select id="widgetSelect" name="widgets">
      <option value="">Select up to two Widgets</option>
      <option v-for="widget in filteredWidgets" v-bind:value='widget.id'>
         @{{widget.name}}
      </option>
   </select>
</div>

在Select2文档中,它说明了如何将Select/Option元素转换为Select2 multiselect元素：

$(document).ready(function() {
    $('#widgetSelect').select2();
});

我可以让它在一个带有非动态呈现的select下拉菜单的页面中工作。显然，这对Vue不起作用，因为下拉列表是动态呈现的，并且它是基于计算出的属性SelectedWidgets的。我需要找到一种方法让select2在这个下拉框出现/更改的时候工作。下面是计算出的属性方法filteredWidgets（）：

filteredWidgets() {
  var filteredWidgets = this.availableWidgets.filter(widget => {
     return widget.color == selectedColor && widget.size == selectedSize;
  });

  return filteredWidgets;
}

虽然默认的select下拉列表按我想要的方式呈现，并包含我想要的筛选小部件，但我需要弄清楚如何在widgetSelect下拉列表由Vue呈现后立即应用select2()。这样做的正确方法是什么？