VueJs nie moge iterowac po Set/Map

<template>
    <div>
        <p class="newRecordTitle"><strong>Create new record</strong></p>
        <form>
            <div class="form-group" v-for="field in fields">
                <label :for="field"><strong>{{ field }}</strong></label>
                <input type="text" class="form-control" :id="field"  :placeholder="field" :v-model="field.split(' ').join('_')">
            </div>
        </form>
        <button @click="handleData" class="btn btn-success createBtn">Create</button>
        
    </div>
</template>

<script>
export default {
    props: ['fields'],
    data(){
        return {
            fieldsMapping: new Set(),
            
        }
    },
    methods: {
        handleCreate(){
            this.fieldsMapping.forEach((key, value) => {
                console.log(key)
            })
        }
    },
    created(){
        this.fields.map(item => {
            this.fieldsMapping[item] = null;
        })
        console.log(this.fieldsMapping);
    }
}
</script>

<style scoped>
.createBtn{
    float: right;
}
.newRecordTitle{
    font-size: 30px;
}
</style>