Дима Паутов

Потому что вы должны добавить условие, которое проверяет, что картинка существует.

// Не пишите тут лишних типов. Юзаете картинку, оставьте только тип картинки
const img = ref<HTMLImageElement | null>(null);

if (img.value) {
  observer.value.observe(img.value);
}

Когда вы делаете ref на какой либо DOM элемент или же компонент, это не значит, что он существует в DOM дереве. TS не умеет определять, существует ли html или нет.

P.S. Читайте ошибки, он вам там чёрным по белому пишет, что помимо картинки, может быть тип null, который у вас указан. А методу observe необходим существующий DOM элемент.

Любой бекенд подойдёт, вне зависимости, пыха это, питон и т.п.

В данных реалиях, у пыхи это laravel, как самый популярный из фреймворков, по моему мнению и мнению знакомых пыхарей.

Берёте laravel, пишите api. Беретё nuxt(2-3), резим SSR, готово.

Если вы хотите изменять что-то внутри канваса, путём того, что меняются значения props, то просто вешайте watch на нужные вам свойства и вызывайте те или иные методы отрисовки канваса.

// MyCanvas.vue
<template>
  <canvas ref="canvas" width="150" height="150"/>
</template>

<script>
export default {
  props: {
    prop1: {
      type: String,
      default: null
    },
    prop2: {
      type: Number,
      default: 0
    }
  },
  data: () => ({
    ctx: null
  }),
  watch: {
    prop1 (value) {
      // Изменилось значение свойства prop1, рисуем квадрат
      this.ctx.fillRect(10, 10, 55, 50);
    },
    prop2 (value) {
      // Изменилось значение свойства prop2, рисуем ещё квадрат
      this.ctx.fillRect(30, 30, 55, 50);
    },
  },
  mounted () {
    if (!this.ctx) {
      this.ctx = this.$refs.canvas.getContext("2d");
    }
  }
}
</script>

https://qna.habr.com/q/1165002#answer_2181206

v-model не подходит для такого и стоит пользоваться @change получая fileList?

Именно так

так может свойство colorзаменить на backgroundColor?

а так же заменить это:
v-for="(index, bgColor) in colorArray"

на это
v-for="(bgColor, index) in colorArray"

тот или иной фреймворк решает различные задачи,

Если имеются ввиду angular, react, vue - чушь это всё собачья. Решают они одни и те же задачи, просто разными методами и философиями.

А что вы хотите услышать?

Каким образом вы выбираете себе автомобиль? Их так много, но все они решают одну и ту же задачу. Vue и React - это как мерседес и BMW. Вечное противостояние 2х философий. Обе машины прекрасны, дороги и комфортны, но у каждой так или иначе своя философия.

Берите то, что нравится. Просто возьмите все 3 и используя стандартные CLI, напишите обыкновенный бложек с созданием, редактированием, удалением записей, детальной страницей, т.е. обыкновенный CRUD. И посмотрите, с каким из них, вам процесс работы нравится больше. Потратить пару дней и всё.

Один спец. скажет вам, что реакт, другой скажет, что vue.
Третий скажет, что реакт это вообще даунгрейд по сравнению с vue(и тут я согласен).
Четвёртый скажет, что реакт для мужиков, на него больше вакансий, они дороже и проще найти работу.
Пятый скажет, что на реакте есть куча всяких штучек дручек и т.п.
Шестой будет молчать, т.к. юзает ангуляр и не знает никаких проблем и с насмешкой смотрит на этих 2х. Потому что это ещё одна, совсем не похожая на других философия. Где за тебя уже всё придумали, сделали и сказали как делать дальше.

Вы не получите полноценную картину.

От себя скажу так, если вы любите работать с html берите vue. Vue для меня гораздо лучше, чем react. В react гораздо больше писанины кода, чем в vue. Я терпеть не могу jsx(во vue он тоже есть), отвратительная штука, но это вкусовщина. Обязательно найдутся те, кто скажет иначе, ради бога. В vue шаблоны - это родной и привычный мне html с очень удобным и понятным шаблонизатором. Любите работать с html, вперёд.

Если вы не любите верстать и вам больше нравится сам процесс писанины js, писать стили на js, берите реакт.
Если вы любите типизацию, если вы за строгий контроль кода и вообще, вы считаете себя "тру" прогером, берите ангуляр, если коротко.

Заметьте, я чаще всего сравниваю react и vue, а ангулар где-то в стороне. angular - это как volvo, тебе ничего больше не нужно, у тебя и так всё хорошо.

Именно так и делать. 2 модели ModelInput на вход и ModelOutput на выход.
А ещё можно почитать про BFF, но это крайний случай, но он решает такие вопросы.

Но вообще, желательно договориться с бекендом о наименовании. Иначе, это на мой взгляд в большинстве своём "мусорный" код, который ничего не делает, а только раздувает пустым переименованием.

Постараться объяснить им, что вы ребята, работаете с json натацией, это ни к чему не обязывает, но всё же.
Что у меня, например, есть линтеры, которые не позволяют писать свойства с нижним подчёркиванием, тире.
Либо, я должен писать их так: obj['my_prop'] что не очень то.

Резюмируя:
1) Договориться, объяснить почему для вас это плохо и какие проблемы вызывает. И какие проблемы у вас могут от этого быть.
2) Делать свои модели для переименования
3) BFF
4) Забить болт, если это проходной проект.

P.S. Я убеждён, что json должен быть в camelCase натации. В своих проектах, я не раз убеждал бекенд команды делать так. Но это всё были новые проекты. Если проект уже старый, то тут точно ничего не подедать, либо BFF.

Объедените данные в 1 объект, и сможете следить за 1м объектом.
Указать вотчеру множество свойств для отслеживания нельзя.

Но можно воспользоваться таким трюком:

mounted() {
    this.$watch(vm => [vm.processes, vm.conditionsIds, vm.activeDialog, vm.variables], value => {
      this.init();
      this.$refs.editor.reInit();
    }, {
      immediate: true, 
      deep: true
    }) 
  }

На мой взгляд, этот код ещё хуже, т.к. не явно определяет вотчеры при просмотре компонента.

<template>
    <i :class="getIconNameByType(type)"/>
  </template>

setup () {
  function getIconNameByType (type) {
    const iconsMap = {
      'image/svg': 'fas file-icon fa-image',
      'image/jpeg': 'fas file-icon fa-image',
      'image/jpg': 'fas file-icon fa-image',
      'text/javascript': 'fas file-icon fa-image',
      // ....
    };

    return iconsMap[type];
  }

  return {
    getIconNameByType
  };
}