Trying to use Select2 in a Vue Component, but options are blank?

I've got a working Vue component that currently renders out options for a select like this:

    <select ref="subdomain_id" name="subdomain_id" id="newEvidenceSubdomain" class="form-control" :class="{ 'is-invalid': errors.subdomain_id }" v-model="subdomain">
        <option value="none" selected disabled hidden></option>
        <option v-for="choice in subdomains" :value="choice" >[[ choice.character_code ]]</option>
    </select>

    <div class="invalid-feedback" v-for="error in errors.subdomain_id">
        [[ error ]]<br />
    </div>

I'm trying to convert that to a Select2 element to give users an easier time with the dropdown.

I've got this in the template:

                          <div>
                            <p>Selected: </p>
                            <select2 :subdomains="choices" v-model="subdomain">
                              <option disabled value="0">Select one</option>
                            </select2>
                          </div>

The rest of the Vue looks like this:

<script type="text/x-template" id="select2-template">
  <select>
    <slot></slot>
  </select>
</script>

<script>
    Vue.component("select2", {
        props: ["subdomains", "value"],
        template: "#select2-template",
        mounted: function() {
            var vm = this;
            $(this.$el)
                // init select2
                .select2({ data: this.subdomains })
                .val(this.value)
                .trigger("change")
                // emit event on change.
                .on("change", function() {
                    console.log('this a thing')
                    vm.$emit("input", this.value);
                });
        },
        watch: {
            value: function(value) {
                // update value
                console.log($(this.$el))
                $(this.$el)
                    .val(value)
                    .trigger("change");
            },
      subdomains: function(subdomains) {
        // update subdomains
        $(this.$el)
          .empty()
          .select2({ data: subdomains });
      }
    },
    destroyed: function() {
        $(this.$el)
            .off()
            .select2("destroy");
    }
    });
</script>

'subdomains' is a list of the options I wish to render (as you can see from the working HTML version).

When I try to make this a Select2 object, I see 'spots' for the data (like it's there, but blank); but it's just a select with invisible options.

I've tried a variety of things, but maybe I'm misunderstanding how this is supposed to get rendered?

All help appreciated!

from Trying to use Select2 in a Vue Component, but options are blank?