andrei_pro

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

держите, этого должно быть достаточно.

Рисуем фигуру, находим ее центр.
При перетаскивании проводим прямую между координатами мыши и центром фигуры (отрисовывать ее не обязательно).
В точку пересечения этой прямой и фигуры помещаем кружок.
Ну и сдвинуть его на 5px по этой-же прямой.

Сделать ограничение по getBoundingClientRect()

const clamp = (min, v, max) => Math.min(max, Math.max(min, v));

let bbox = yourBlock.getBoundingClientRect();
let x = clamp(bbox.left, e.clientX, bbox.right)
let y = clamp(bbox.top, e.clientY, bbox.bottom)

[...new Set(array.flatMap(n => n.columns).map(n => n.type).filter(n => !defaultTypes.includes(n)))]

пишет ошибку что свойства id нету

А так ли это на самом деле? Вместо пересказа следует текст ошибки показывать. Почему-то уверен, что у вас там не id отсутствует, а не получается достать id из отсутствующего объекта, типа "Cannot read property 'id' of undefined". В случае отсутствия объектов подсовывайте пустые:

isShow() {
  return ((this.getProject() || {}).creator || {}).id === this.user.id;
},

как в другом компоненте дождаться пока метод fetch() положит данные с store?

Условный рендеринг - добавьте v-if="данные" тому элементу/компоненту, что эти данные использует.

Вы путаете сладкое с мягким.
Constraint ограничение - когда вы задаёте параметры таблицы при помощи create/alter table
вы говорите, что для такого-то поля задаётся constraint (ограничение).
Ограничениями может быть primary key, foreign key, unique, default, check и т. д. - это всё ограничения.
Вот таблица:

CREATE TABLE MYTABLE  (
   ID BIGINT NOT NULL CONSTRAINT PK_MYTABLE PRIMARY KEY,
   CLIENT BIGINT NOT NULL CONSTRAINT FK_MYTABLE_CLIENT FOREIGN KEY REFERENCES CLIENTS(ID),
   EMAIL NVARCHAR(100) NOT NULL CONSTRAINT UQ_MYTABLE_EMAIL UNIQUE,
   ACTIVE BIT NOT NULL CONSTRAINT DF_MYTABLE_ACTIVE DEFAULT (1)
)

Что переводится как:
Создать таблицу MYTABLE (с полями):
ID целое 64 бит, не допускать пустых, ограничение с названием PK_MYTABLE вида "Первичный ключ",
CLIENT целое 64 бит, не допускать пустых, ограничение с названием FK_MYTABLE_CLIENT вида "Внешний ключ", который ссылается на таблицу CLIENTS, поле ID,
EMAIL строковое длиной 100, не допускать пустых, ограничение с названием UQ_MYTABLE_EMAIL вида "Должно быть уникальным",
ACTIVE бит, не допускать пустых, органичение с названием DF_MYTABLE_ACTIVE вида "Значение по умолчанию" равное 1

Есть и альтернативный синтаксис, где ключевое слово constraint не используется.
В основном его применяют, когда надо явно задать имя на ограничение.

console.time('Image loading');
document.querySelector('img').addEventListener('load', function() {
	console.timeEnd('Image loading'); //> Image loading: 1192.903076171875ms
});

var start = performance.now();
document.querySelector('img').addEventListener('load', function() {
	var end = performance.now();
	console.log(end - start); //> 13.999999999214197
});

Собственно кусок кода проекта из нашей статьи) https://habr.com/post/414137/

<script>
    import {parse} from 'himalaya'
    import Product from '~/components/Product/Product.vue';
    const hasProduct = parsedHtml => {
        let has = false;
        if (parsedHtml.children) {
            parsedHtml.children.forEach(ch => {
                if(has) return;
                if (ch.tagName == 'product') {
                    has = true;
                } else {
                    has = hasProduct(ch);
                }
            });
        }
        return has;
    };
    const toElement = (h, products) => parsedHtml => {
        if (parsedHtml.type == 'Text') {
            return [h('span', {
                domProps: {
                    innerHTML: parsedHtml.content
                },
            })];
        }
        if (parsedHtml.tagName == 'product') {
            let product = products.find(product => product.slug == parsedHtml.attributes.slug);
            if (!product) return '';
            return [h('div', {
                'class': ['catalog', 'catalog_view_row'],
            }, [
                h('div', {
                    'class': ['catalog__cell'],
                }, [
                    h(
                        'product',
                        {props: {product}}
                    )
                ])
            ])];
        }
        let has = hasProduct(parsedHtml);
        return h(
            has ? 'div' : parsedHtml.tagName,
            {
                'class': parsedHtml.attributes.className,
                'attrs': parsedHtml.attributes,
            },
            parsedHtml.children
                ? parsedHtml.children.map(toElement(h, products))
                : []
        )
    };
    export default {
        components: {
            Product,
        },
        props: [
            'html',
            'products',
        ],
        render(h) {
            let tree = parse(`<div>${this.html}</div>`);
            return tree.map(toElement(h, this.products))[0];
        }
    };
</script>

И регулярга:

let match = article.content.match(/\$product\[([^\]]+)\]/g);
            if(match != null && match.length) {
                let promises = match.map(async (m) => {
                    let slug = m.match(/\[(.+)\]/)[1];
                    try {
                        let product = await ctx.app.$api.product(slug);
                        if(product) products.push(product);
                    } catch (e) {
                    }
                });
                await Promise.all(promises);
            }

не нужно менять ссылки, категорически

• или сохраняете все URL, которые сможете
  
• или делаете редиректы со старых на новые
  

редиректы можно реализовать или в движке нового сайта
или отдельно, редиректами перед новым движком, где нибудь на nginx