Vue отрисовка массива

[fxobject]

в массиве находятся объкты, свойства которого являются колонками таблицы. Каждый элемент объекта строка, свойства - колонки.
разметка сделана вот так:
<div>
<div>заголовок колонки 1</div>
<div disabled v-for="HostRead in device.snmpHostRead.value">{{HostRead.ip}}</div>
</div>

<div>
<div>заголовок колонки 2</div>
<div disabled v-for="HostRead in device.snmpHostRead.value">{{HostRead.community}}</div>
</div>
ну и т.д.
что то меня терзают смутные сомнения, что цикл вывода отрабатывает столько количество раз, сколько колонк.
Нехорошо. И по разметке не объединить в один никак не получается.
Есть ли какая нибудь хитрость в vue чтобы решить этот вопрос одним циклом (кроме как менять разметку)?
Спасибки

[Aetae]

Очевидно.

<template v-for="HostRead in device.snmpHostRead.value">
<div>
<div>заголовок колонки 1</div>
<div disabled>{{HostRead.ip}}</div>
</div>

<div>
<div>заголовок колонки 2</div>
<div>{{HostRead.community}}</div>
</div> 
</template>

[fxobject]

неочевидно и неправильно. вариант только менять разметку. спасибо

[fxobject]

Еще есть один вопрос, у меня получается информационная структура очень сложная, причем вариативная (т.е. определенные поля присутствуют всегда, другие могут появляться или исчезать).
Но самое главное - не все поля участвуют в отрисовке на странице.
Насколько правильно (концептуально) хранить всю структуру в vue?
Ну не дублировать же данные для него создавая только отображаемые свойства?
Т.е. получив полный пакет с данными нужно ли
1 сохранить их в классе и для vue передать только те, которые он использует для отображения. (фигня полная)
2 весь объект с данными передается vue. тут сомнения........
кстати можно сделать как то чтобы на определенные данные vue не ставил свой сеттер, геттер?
Спасибо всем кто откликнется

[Aetae]

Если данные не должны быть реактивными - т.е. вида положил и забыл, то чтоб не плодить оверхеда на реактивность почём зря есть два способа сказать vue не трогать объект:
1. Официальный - Object.freeze(). Микроскопический оверхед на собственно заморозку.
2. Недокументированный - свойство _isVue: true. Проще и нет оверхеда, но на свой страх и риск.

[fxobject]

Я это посмотрю, но все очень важный вопрос - где же хранить данные.
Имеем некий сложный объект. Ему соответствуте некоторое количество "страниц" отрисовок. (страниц в смысле закладки). Причем не все данные объекта участвуют в отрисовке. Поля объекта могут менятся по поступающим запросам websokect и отрисовка vue как нельзя кстати.
данные также участвуют в расчетных алгоритмах которые не визуализируются.... ну и так далее. vue - это был прогресс уйти от разметки кода в скрипте js.
Но где же хранить полноценный объект не могу сообразить!
есть совет?

[Aetae]

Где удобнее там и храните. Если вам нужна реактивность, не обязательно хранить данные для этого прям в компоненте. Можно сделать отдельно реактивный объект и использовать его где-то у себя в коде, импортируя его в нужный компонент и используя в computed если нужна часть и в data если весь. В vue 2 для этого есть observable(), в vue 3 - reactive().

Оверхед на реактивность "лишних" свойств обычно пренебрежимо мал. Тут уж самому смотреть надо что выгодней в конкретном случае: реактивить лишнее или убирать руками.

[fxobject]

В общем суть понятна. Спорить не буду. Немного неправильно я выставил акценты по отношению к vue. Если у него уровень абстракции - отрисовка данных, ну значит не нужно ничего больше требовать. нужно просто создать удобный механизм обновляющий его сеттеры при изменении данных, ну и структура только для DOM элементов.
Ладно, спасибо. Пошел думать

[Aetae]

fxobject, Vue - отрисовка + реактивность, не стоит забывать про реактивность, она самая лучшая и удобная из тех что видел.)

А структура кода, архитектура и паттерны - это да, не к Vue.

[fxobject]

Это да. Насколько у меня негатив по отношению в фрейморкам. Вот второй день разбираюсь - кайфую )))