Пользовательский радио компонент в последней версии Vue не будет работать вообще в последней версии Safari

Question

ОБНОВЛЕНИЕ : Это проблема невозможности отобразить активный класс. Клик регистрирует данные.

Ожидается

Текущий

RadioInput

<RadioInput
  v-model="form.userType"
  label="User Type"
  :options="[
  { id: 'two', name: 'Investor', checked: true },
  { id: 'one', name: 'Entrepreneur', checked: false }
  ]"
                />

<template>
    <ValidationProvider
        class="mb-4 RadioInput"
        tag="div"
        data-toggle="buttons"
        :rules="rules"
        :name="name || label"
        v-slot="{ errors, required, ariaInput, ariaMsg }"
    >
        <label
            class="form-label"
            :for="name || label"
            @click="$refs.input.focus()"
            :class="{ 'text-gray-700': !errors[0], 'text-red-600': errors[0] }"
        >
            <span>{{ label || name }} </span>
            <small>{{ required ? " *" : "" }}</small>
        </label>

        <div class="btn-group btn-block btn-group-toggle" data-toggle="buttons">
            <label
                :for="item.id"
                v-for="item in options"
                class="btn btn-light"
                :class="{ 'active': item.checked }"
            >
                <input
                    @click="update(item.name)"
                    type="radio"
                    :name="name || label"
                    class="form-control custom-control-input"
                    :id="item.id"
                    ref="input"
                    v-bind="ariaInput"
                    autocomplete="off"
                    :checked="item.checked"
                />
                {{ item.name }}
            </label>
        </div>

        <span
            :class="{ 'invalid-feedback': errors[0] }"
            v-bind="ariaMsg"
            v-if="errors[0]"
            >{{ errors[0] }}</span
        >
    </ValidationProvider>
</template>

<script>
import { ValidationProvider } from "vee-validate";

export default {
    name: "RadioInput",
    components: {
        ValidationProvider
    },
    props: {
        name: {
            type: String,
            default: ""
        },
        label: {
            type: String,
            default: ""
        },
        rules: {
            type: [Object, String],
            default: ""
        },
        options: {
            type: Array,
            default: []
        }
    },
    methods: {
        update(value) {
            this.$emit("input", value);
        }
    },
    created() {
        this.$emit(
            "input",
            _.filter(this.options, { checked: true })[0]["name"]
        );
    }
};
</script>

<style scoped>
.invalid-feedback {
    display: block;
}
</style>

Answer 1

const Wrapper = Vue.component("Wrapper", {
  props: ["options", "activeIndex"],
  template: `<div>
  <div v-for="(item, index) in options" class="item" :class="{active: index === activeIndex}" @click="$emit('input', index)">{{item.name}}</div>
  </div>`,
});

new Vue({
  el: "#app",
  template: `<div>
  <Wrapper :options="options" :activeIndex="activeIndex" v-model="activeIndex"></Wrapper>
  </div>`,
  data() {
    return {
      options: [
        { id: "two", name: "Investor", checked: true },
        { id: "one", name: "Entrepreneur", checked: false }
      ],
      activeIndex: -1
    };
  },
  created() {
    this.activeIndex = this.options.findIndex(i => i.checked);
  }
});

body{
  display: flex;
  justify-content: center;
  align-items: center;
}
.item{
  width: 100px;
  border: 1px solid;
  padding: 10px;
}
.item.active{
  background-color: rgba(0,0,0, 0.3);
}

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <div id="app"></div>