Aetae

Используй getters, оно именно для этого и предназначено. Точно также как computed в самом vue.

export default createStore({
  state: {
    list1: [],
  },
  getters: {
    list2(state) {
      return state.list1.filter(...) 
    }
  }
})

P.S. И да, нахрен vuex, используй pinia.

SSR-friendly - значит что ты не должен об этом думать, а за тебя подумает фреймворк и сделает всё интуитивно снаружи и правильно внутри.)

С Vue и Vuex проблем нет.
Вместо import getPRoducts напиши

const getPRoducts = async () => {
  return [1, 2, 3]
}

и сможешь в этом убедиться.

Проблема с твоим "сервисом" запросов. Смотри в консоль - он вообще работает, у тебя настроен cors, чтоб запрашивать с других портов? Если нет, то и не настраивай - используй devserver proxy и обращайся по относительным ссылкам как это будет и в проде.

Компоненты могут быть переиспользованы. Но помимо переиспользуемых компонентов, которые действительно не должны лезть ни в какой vuex, есть собственно и страницы самого приложения\сайта. Они никогда не будут переиспользованы, кроме как в том же самом приложении и у них должно быть общее состояние(не может не быть).

В action'ах(и вообще в store) this, вполне очевидно, не указывает на текущий инстанс Vue(потому что какой для стора текущий?).

Либо отдельно экспортируйте - импортируйте router, либо добавьте его в store.

Ну а лучше не пихайте логику в хранилише. Хранилище должно хранить данные. Как поблажка - делать пред\постобработку(и то уже на грани). Получение же данных, логику переходов и всё такое прочее - вынесите в отдельный сервисный слой, никак не связанный с хранилищем.
И похрен, что об этом говорят 100500 уроков от "гуру".

Если это изменение нужно делать всегда, независимо ни от чего иного то просто: watch:

store.watch(state => state.budget.settings.month, () => store.dispatch('budget/GET'))

1. Нет. Зевс молнией вас не испепелит. Втыкать лишнее computed заради одного единственного вызова никакого смысла нет.
2. В хранилище должны быть только функции относящиеся к хранению данных. Некоторые пихают в store чуть ли не всю логику приложения, как по мне, так это форменное безумие.
У вас есть повторяющийся код связанный с работой с данными? Используйте миксины или вообще просто обычные отдельные js модули.
3. Маленькая.
4. Такой же как и без vue - аккуратная вёрстка с использованием разумной системы(БЭМ и пр.). Никакой излишне сложной логики в шаблоне быть не должно, а потому оная на это практически не влияет.
Для действительно сложной логики, способной превратить шаблон в кашу, используется render функция.

Потому что это хранилище. Там надо хранить.
Это не шина обмена данными.
Если вы делаете компонентомешалку, используйте например provide и inject для общей в рамках родительского компонента системы.

Для чего и в каком виде нужны?
В любом случае, в контексте action'ов и геттеров есть rootState и rootGetters, для любых адекватных целей этого должно вам хватить.