How can I render an item in a smart select Vue

Questions
1

I need to create a complex select, with a transition to another select, with a check, etc.
For I decided that I need to use the render function. But for some reason it doesn’t work. Please tell me what am I doing wrong.

image

<f7-list-item
        v-show="isLoading"
        class="item-input custom-smart-select-wrapper cheklist-smart-select"
        :title="$ml.get('HOME_MSG002')"
        smart-select
        :key="componentKeyChecklist"
        ref="checklistSmartSelect"
      >
        <f7-icon
          slot="media"
          icon="f7-icons icon-other-checklist text-color-lightgray"
        ></f7-icon>
        <select
          name="checkLists"
          v-model="selectedCheckList"
          required
          validate
          @change="showCheckList"
        >
          <option
            v-for="list in checkLists"
            :key="list.Code"
            :value="list.Code"
          >
            {{ list.Name }}
          </option>
        </select>
      </f7-list-item>



  mounted() {
    var mySmartSelect = this.$f7.smartSelect.create({
      el: ".cheklist-smart-select a",

      renderItem: function (item, index) {
        var rand = Math.floor(Math.random() * 5);
        return `

  <li>test</li>
`;
      },
    });
  },