React, Vue and Svelte: Comparing Multi Select Binding

const [multiSelected, setMultiSelected] = useState<string[]>([
    'Frontend Developer',
]);
const handleMultiSelected = (options: any) => {
let selectedOptions = [...options]
    .map((option) => option.value)
    .reduce((prev, current) => [prev, ', ', current]);

setMultiSelected(selectedOptions);
};

<section>
    <h2>Multi Select</h2>
    <select multiple style={{ width: '100px' }} onChange={(e)=> handleMultiSelected(e.target.selectedOptions)}
        >
        <option>Frontend Developer</option>
        <option>Backend Developer</option>
        <option>Fullstack Developer</option>
    </select>
    <p>Selected: {multiSelected}</p>
</section>

const multiSelected = ref(['Frontend']);

<section>
    <h2>Multi Select</h2>
    <select v-model="multiSelected" multiple style="width: 100px">
        <option>Frontend Developer</option>
        <option>Backend Developer</option>
        <option>Fullstack Developer</option>
    </select>
    <p>Selected: {{ multiSelected }}</p>
</section>

let multiSelected: string[] = ['Frontend Developer'];

<section>
    <h2>Multi Select</h2>
    <select bind:value={multiSelected} multiple style="width: 100px">
        <option>Frontend Developer</option>
        <option>Backend Developer</option>
        <option>Fullstack Developer</option>
    </select>
    <p>Selected: {multiSelected}</p>
</section>