Smirator

Привет.
Проблема была в том, что posts.value в момент вызова forEach ещё не был инициализирован, так как данные загружаются асинхронно через fetch. Вначале posts.value — это undefined, и из-за этого попытка вызвать forEach на нём вызывала ошибку.

Попробуй такой вариант:

import { ref, watchEffect } from 'vue'

const posts = ref([])
const database = ref([])

watchEffect(async () => {
  const response = await fetch('http://localhost:3000/posts')
  posts.value = await response.json()

  if (posts.value.length) {
    posts.value.forEach((item) => {
      database.value.push({ id: item.id, name: item.name })
    })
  }
})
</script>

<template>
  <div v-for="item in posts" :key="item.id">
    {{ item.name }}
  </div>
</template>

Теперь posts и database изначально инициализированы как пустые массивы, и forEach вызывается только после того, как данные загружены. Ошибка не должна появиться.

Привет. Нужно использовать параметры маршрута. В твоем случае selected из Catalog в Bread.
Я бы попробовал например, так:

<template>
  <div>
    <!-- Компонент Catalog -->
    <router-link :to="{ name: 'Bread', params: { selected: selected } }">Go to Bread</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 'some_value', // значение selected
    };
  },
};
</script>

В нужном компоненте получил параметры. В твоем случае в Bread.

<template>
  <div>
    <!-- Компонент Bread -->
    <p>{{ selected }}</p>
  </div>
</template>

<script>
export default {
  props: ['selected'],
  mounted() {
    console.log(this.selected); // значение  доступно в этом компоненте через props
  },
};
</script>

Ну и роутинг:

const routes = [
  {
    path: "/",
    name: "Main",
    component: Main,
    children: [
      {
        path: "",
        component: Section,
      },
      {
        path: "/Catalog",
        name: "Catalog",
        component: Catalog,
        children: [
          {
            path: "/Catalog/Bread",
            name: "Bread",
            component: Bread,
            props: true, // это позволит передать параметры маршрута как props в Bread
          },
        ],
      },
    ],
  },
];

<li v-for="(val, key) in data" :some-data="key">{{ val }}</li>

Почитать тут: https://ru.vuejs.org/v2/guide/list.html#v-for-%D0%...

Если правильно понял вопрос