VueJS aligning recursive component - vue.js

Question

I've built a recursive component that is doing what I want. However, I'm struggling to figure out how to programmatically keep the elements in align:
Here is the component in it's entirety:
<template>
<div class="row-creator" ref="row">
<div v-for="(item, index) in row" :key="index" :style="[indent, newWidth]">
<div v-if="typeof(item) === 'string'">
<v-multi-select
:value="properties.filter((prop) => { return prop.target === item; })"
class="mb-3"
track-by="target"
label="target"
placeholder="Choose an attribute"
:options="properties"
:searchable="false"
:allow-empty="false"
:show-labels="false">
<template slot="singleLabel" slot-scope="{ option }"></template>
</v-multi-select>
<i class="fa fa-minus-circle"></i>
<i class="pl-2 fa fa-plus-circle" id="addBtn"></i>
<b-popover target="addBtn" placement="bottomleft" triggers="click">
<b-list-group class="list-group">
<b-list-group-item button><i class="fa fa-plus fa-2x pr-2"></i> Add a field</b-list-group-item>
<b-list-group-item button><i class="fa fa-plus fa-2x pr-2"></i> Add a group</b-list-group-item>
</b-list-group>
</b-popover>
</div>
<div v-else>
<v-multi-select
:value="options[0].key === Object.keys(item)[0] ? options[0] : options[1]"
class="mb-3"
track-by="key"
label="text"
:options="options"
:searchable="false"
:allow-empty="false"
:show-labels="false">
</v-multi-select>
<i class="fa fa-minus-circle"></i>
<i class="pl-2 fa fa-plus-circle" id="addBtn"></i>
<b-popover target="addBtn" placement="bottomleft" triggers="click">
<b-list-group class="list-group">
<b-list-group-item button><i class="fa fa-plus fa-2x pr-2"></i> Add a field</b-list-group-item>
<b-list-group-item button><i class="fa fa-plus fa-2x pr-2"></i> Add a group</b-list-group-item>
</b-list-group>
</b-popover>
<row-creator
:row="item[Object.keys(item)[0]]"
:properties="properties"
:options="options"
:depth="depth + 1">
</row-creator>
</div>
</div>
</div>
</template>
<script>
import vMultiselect from 'vue-multiselect';
export default {
props: [ 'row', 'properties', 'options', 'depth' ],
name: 'row-creator',
components: {
'v-multi-select': vMultiselect
},
computed: {
indent () {
return { transform: `translate(${this.depth * 20}px)` };
},
newWidth () {
// return { width: this.$refs.row.clientWidth - this.depth * 20 + 'px' };
}
}
};
</script>
How can create a computed property to adjust the width of the various rows? This form represents an object. What is the best way to keep the data object in sync? Can I use v-model?

Answer 1

Don't use css transform for this. Use margin-left instead!