Echo '<tr onclick="app.getSize(this)" data-id="' . $arProp['ID'] . '">'; получаю дочерние

элементы <tr>.
<?php
$resOffers = CUtil::PhpToJsObject(getFlowersOffers()); // Преобразую многомерный PHP массив в массив объектов.
?>
<div id="my-app">
<div>
<template v-if="filteredItems && filter">
<select class="offer">
<option
v-for="(item, index) in filteredItems"
:key="item.ID"
:value="item.CATALOG_PRICE_1"
:data-price="item.CATALOG_PRICE_1"
:data-length="item.PROPERTY_LENGTH_WIDTH_VALUE"
:data-height="item.PROPERTY_THIKNESS_HEIGHT_VALUE"
>
{{ item.PROPERTY_LENGTH_WIDTH_VALUE }}
</option>
</select>
</template>

<p v-if="filteredItems.length <= 0" class="text-grey-dark p-1">no results</p>


</div>
</div>

<script>

function Filter (items, input) {
return items.filter(function(element) {
console.log('input', input);
return element.PROPERTY_LENGTH_WIDTH_VALUE.split('х').pop() === input.toString();
}.bind(this))
}
var app = new Vue({
el: '#my-app',
data: function () {
return {
items: <? echo $resOffers; ?>,
filter: '100'
}
},
methods: {
getSize(item) {
this.filter = item.children[1].innerHTML.trim().split('х', 1).toString();
console.log(this.filter);
}
},
computed: {
filteredItems: function () {
if (this.filter === "") {
return this.items;
}
return Filter(this.items, this.filter);
}
},
watch: {
filter: function (oldVal, newVal) {
if (this.filter === oldVal)
return this.filter;
else
return this.filter = newVal;
}
}
})
</script>

а где v-model или :value на селекте?