0xD34F

computed: {
  categories() {
    return this.posts.data.reduce((acc, n) => (
      (acc[n.category_name] ??= {
        name: n.category_name,
        posts: [],
      }).posts.push(...n.posts),
      acc
    ), {});
  },
  ...

<div v-for="category in categories">
  <h3>{{ category.name }}</h3>
  <div v-for="post in category.posts">
    {{ post.title }}
  </div>
</div>

ref указанный так указывает на Proxy а не на элемент. Как это исправить?

Никак не исправить.

Да это и не нужно. За этим Proxy скрывается ссылка на экземпляр компонента, а у экземпляра компонента в качестве одного из свойств присутствует ссылка на элемент.

С какого места, сколько и на что надо заменить:

const index = 1;
const count = 2;
const value = 'hello, world!!';

Заменяем:

arr.splice(index, count, ...Array(count).fill(value));

// или, splice использовать необязательно
for (let i = count; i-- > 0; arr[index + i] = value) ;

Если вдруг возможен выход за границы массива (количество заменяемых элементов больше чем разность длины массива и индекса, с которого надо выполнить замену), то вместо оригинального значения количества можно использовать исправленное:

const fixCount = Math.max(0, Math.min(count, arr.length - index));

function getDates(startStr, length) {
  const date = new Date(startStr.split('.').reverse().join('-'));
  const day = date.getDate();
  date.setDate(0);

  return Array.from({ length }, () => {
    date.setMonth(date.getMonth() + 2, 0);
    date.setDate(Math.min(date.getDate(), day));

    return date.toLocaleDateString('ru-RU', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
    });
  });
}

не единственный

function Pokemon({ name, url }) {
  const [ data, setData ] = useState(null);

  useEffect(() => {
    fetch(url).then(r => r.json()).then(setData);
  }, [ url ]);

  return (
    <div>
      <h4>{name}</h4>
      {data
        ? <div>
            <ul>{data.abilities.map(n => <li>{n.ability.name}</li>)}</ul>
            <img src={data.sprites.front_default} />
          </div>
        : <div>loading...</div>
      }
    </div>
  );
}

const lines = data.split('\n').map(n => n.replace(/X\S+/, 'hello, world!!'));

Убирается. А потом из-за клика добавляется обратно.

Надо не тупо всем подряд false назначать, а только тем, по кому не было клика:

document.body.addEventListener('click', e => {
  document.querySelectorAll('details[open]').forEach(n => {
    n.open = n === e.target.parentNode;
  });
});

1:

index = next((i for i, n in enumerate(arr) if key in n), -1)

2:

value = next((n[key] for n in arr if key in n), None)

data: () => ({
  blockTypes: [ 'block-item1', 'block-item2' ],
  blocks: [],
}),

<button v-for="n in blockTypes" @click="blocks.push(n)">add {{ n }}</button>
<component v-for="n in blocks" :is="n"></component>

return this.arr.sort(...

Что делает метод sort:

Метод sort() на месте сортирует элементы массива

копия массива не создаётся

То есть, выполнили сортировку - потеряли исходное состояние массива.

Делайте внутри вычисляемого свойства копию массива, и сортируйте её. А когда нужны данные в неотсортированном виде, ничего не делайте, просто возвращайте массив, как он есть.

new_list = [ dict(zip(cols, n)) for n in old_list ]

methods: {
  trClass: rowData => rowData.is_blocked && 'table-danger',
  ...

<b-table
  :tbody-tr-class="trClass"
  ...

Кроме полных данных храните также и отфильтрованные. Их и отображайте. Значение фильтра пусть хранится в родителе - передавайте его в экземпляр компонента фильтра вместе с функцией, которая его (значение) будет обновлять. При обновлении значения фильтра обновляете массив отфильтрованных данных.

const Filter = ({ title, values, value, onChange }) => (
  <div>
    <h3>{title}</h3>
    {values.map(n => (
      <label>
        <input
          type="radio"
          onChange={() => onChange(n)}
          checked={value === n}
        />
        {n}
      </label>
    ))}
  </div>
);

state = {
  ...
  filteredProducts: [],
  status: 'all',
}

onFilterStatusChange = status => {
  this.setState({ status });
}

filterProducts() {
  this.setState(({ status }) => ({
    filteredProducts: status === 'all'
      ? this.state.products
      : this.state.products.filter(n => n.prod_status.includes(status)),
  }));
}

componentDidUpdate(prevProps, prevState) {
  if (this.state.status !== prevState.status) {
    this.filterProducts();
  }
}

render() {
  ...
    <Filter
      title="Status:"
      values={[ 'all', 'recommended', 'saleout', 'bestseller', 'new' ]}
      value={this.state.status}
      onChange={this.onFilterStatusChange}
    />
    <Products products={this.state.filteredProducts} />
  ...
}

Вместо <div className="status">{status}</div> пусть будет

{status.split(',').map(n => <div className="status">{n}</div>)}

Вместо вывода текущего результата в консоль возвращайте массив, состоящий из текущего результата и результатов рекурсивного вызова:

function getDividers(num, divider) {
  return num === 1
    ? []
    : num % divider
      ? getDividers(num, divider + 1)
      : [ divider, ...getDividers(num / divider, divider) ];
}

Ну а с полученным массивом можете делать что там вам надо:

function showDividers(num) {
  if (!Number.isInteger(num) || num < 2) {
    throw 'fuck off';
  }

  console.log(`${num} = ${getDividers(num, 2).join(' * ')}`);
}

setup() {
  ...
  const boards = computed(() => {
    return store.getters["boards/getBoards"];
  });

  return boards;
},

А если бы у вас было два вычисляемых свойства, что бы вы возвращали из setup? Вообще, что следует возвращать из setup? Откройте документацию и разберитесь.

function createTree({
  data,
  idKey = 'id',
  parentKey = 'parentId',
  childrenKey = 'children',
}) {
  const tree = Object.fromEntries(data.map(n => [ n[idKey], { ...n, [childrenKey]: [] } ]));
  return Object.values(tree).filter(n => !tree[n[parentKey]]?.[childrenKey].push(n));
}


const result = createTree({
  data: components,
  childrenKey: 'components',
});