refactor

src/components/Article.vue

 <template>
   <article class='v-sheet v-card rounded-xl' v-bind:class="{'collapsable': collapsable, 'collapsed': collapsed}" v-if="article">
-    <div v-if ="invalid"><v-icon left>warning</v-icon> {{$t('error.article', {no: article.article_id, dict: $t('dicts.'+this.dictionary)})}}</div>
-    <Header v-if="!invalid" :title_id="title_id" :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" @toggle-collapse = "toggle_collapse"/>
+    <div v-if="!invalid">
+    <Header :title_id="title_id" :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" @toggle-collapse = "toggle_collapse"/>
     <InflectionButton :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id"/>
     
-    <div class="article_content" :class="$vuetify.breakpoint.name" v-if="!collapsed && !invalid">
+    <div class="article_content" :class="$vuetify.breakpoint.name" v-if="!collapsed">
       <section v-if="article.body.pronunciation && article.body.pronunciation.length" class="pronunciation">
         <h3>{{$t('article.headings.pronunciation', content_locale)}}</h3>
           <ul>
@@ -30,7 +30,9 @@
         </ul>
       </section>
     </div>
-    <ArticleFooter v-if="!collapsed && !invalid" :article="article"/>
+    <ArticleFooter v-if="!collapsed" :article="article"/>
+    </div>
+    <div v-else><v-icon left>warning</v-icon> {{$t('error.article', {no: article.article_id, dict: $t('dicts.'+this.dictionary)})}}</div>
 </article>
 </template>