Vuejs select options

trying to make select option: DVD, Books, Furniture. When selecting DVD it changes the element content to: DVD selection content . Code on select option and the form that should change:

`<div class="typeswitcher">
                <div>
                    <h4 class="typeHeading">Type Switcher</h4>
                </div>
                <select name="typeSwitcher" id="typeSwitcher" v-model="itemType">
                    <option value="DVD" id="DVD" >DVD</option>
                    <option value="dimensions" id="Furniture">Furniture</option>
                    <option value="weight" id="Book">Books</option>
                    
                </select>
            </div>
            <form method="POST">
                    <div class="switcher-form">
                        <!-- //slice used to remove unnecessary iterations from the v-for -->
                        <div v-if="itemType === 'DVD'" class="row mb-1" v-html="item.size" v-for="item in switcherForm.slice(0,1)":key="item" >
                        </div>
                        <div v-if="itemType === 'dimensions'" class="row mb-1"v-html="item.dimensions" v-for="item in switcherForm.slice(1,2)":key="item">                            
                        </div>
                        <div v-if="itemType === 'weight'" class="row mb-1" v-html="item.weight" v-for="item in switcherForm.slice(2,3)":key="item" >
                        </div>
                        
                    </div>

import { createApp } from 'https://ift.tt/eWoq2Zn'

createApp({
    data() {
    return {
        title: 'Add product',
        itemType:null,
        switcherForm: [
                        {size:`
                        <label class="col-sm-4 col-form-label">Size (MB)</label>
                        <div class="col-sm-6">
                            <input id="size" type="text" name="size" placeholder="size" value="<?php echo $size; ?>"></input>
                            <h6>Please provide DVD size in MB.</h6>
                        </div>
                        `},
                        {dimensions:`
                        <label class="col-sm-4 col-form-label">Dimensions</label>
                        <div class="col-sm-6">
                            <input type="text" name="dimensions" placeholder="dimensions" value="<?php echo $dimensions; ?>"></input>
                            <h6>Please provide dimensions in HxWxL. format</h6>
                        </div>
                        `},
                        {weight:`
                         <label class="col-sm-4 col-form-label">Weight (KG)</label>
                        <div class="col-sm-6">
                            <input type="text" name="weight" placeholder="weight" value="<?php echo $weight; ?>"></input>
                            <h6>Please provide Book weight in KG.</h6>
                        </div>
                        `},

                    ] 
        }
    },
}).mount('#add-product')

    I got it work like this, connected the itemType:null to typeswitcher with v-model and then used <div v-if="itemType === 'DVD'" class="row mb-1" v-html="item.size" v-for="item in switcherForm.slice(0,1)":key="item" > with every input i wanted to render , used slice method to cut off excess v-for iterations. switcherForm is an array of objects with the html inputs.



  [1]: https://codepen.io/aTHEM2/pen/gOezQJr