Компонент для работы с фразами из wordstat ( https://ideaweb.site/tools/seo-words )

Words.vue

<template>
    <div class="container minuses-finder">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card card-default">
                    <div class="card-header">Минусовка seo-фраз</div>
                    <div class="card-body">
                        <div class="row mb-5">
                            <div class="col-6">
                                <textarea rows="10"
                                          v-model="raw_words" placeholder="Сюда нужно вставить все запросы"
                                          class="form-control"></textarea>
                                <div class="my-1">
                                    <span class="btn btn-danger btn-sm" v-for="word in minuses" @click="toggleMinus(word)">
                                        {{word}}
                                    </span>
                                    <h6 v-if="minuses.length > 0" class="text-muted">Клик - убрать слово из списка минусов</h6>
                                </div>
                            </div>
                            <div class="col-6">
                                <h6 class="phrase-minused" v-for="phrase in phrases_array" v-if="phraseDeleted(phrase)">
                                    <span v-for="word in getWords(phrase)"
                                          @click="toggleMinus(word)"
                                          :class="[ { minus: isMinus(word) } ]">
                                        {{word}}
                                    </span>
                                </h6>
                                <h5 v-else>
                                    <span v-for="word in getWords(phrase)"
                                          @click="toggleMinus(word)">
                                        {{word}}
                                    </span>
                                </h5>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <textarea class="form-control" rows="10" v-model="all_minuses" placeholder="Все минуса будут здесь.."></textarea>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('seo-words mounted.')
        },
        data: function () {
            return {
                raw_words: '',
                minuses: [],

            }
        },
        methods: {
            getWords: function (phrase) {
                return phrase.split(' ')
            },
            toggleMinus: function (word) {
                if (this.isMinus(word)) {
                    this.minuses.splice(this.minuses.indexOf( word ), 1 )
                } else {
                    this.minuses.push(word)
                    this.minuses = this.minuses.filter( this.cleanThisShit )
                }
            },
            isMinus: function (word) {
                return (this.minuses.indexOf(word) >= 0) ? true : false;
            },
            phraseDeleted: function (phrase) { // включено ли слово в минуса
                let word
                for (word of phrase.split(' ') ) {
                    if (this.isMinus(word))
                        return true
                }
                return false
            },

            //################################################
            cleanThisShit: function (value, index, self) {
                return self.indexOf(value) === index;
            },

        },
        computed: {
            phrases_array: function () {
                return this.raw_words.split('\n')
            },
            all_minuses: function () {
                return this.minuses.join(', ')
            },
        },
    }
</script>

<style>
    span.minus {
        text-decoration: line-through;
        background: #fcc;
        border-radius: 5px;
        color: #777;
    }
    h5 {
        color: #333;
    }
    h6.phrase-minused {
        color: #444;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    .btn {
        margin: 3px;
    }
    .minuses-finder {
        font-family: "Arial";
    }
</style>