diff --git a/app/controllers/step_orderable_elements_controller.rb b/app/controllers/step_orderable_elements_controller.rb
index eae9ee97e..d6ad48c41 100644
--- a/app/controllers/step_orderable_elements_controller.rb
+++ b/app/controllers/step_orderable_elements_controller.rb
@@ -2,7 +2,7 @@
 
 class StepOrderableElementsController < ApplicationController
   before_action :load_vars_nested
-  before_action :load_vars
+  before_action :load_vars, only: :destroy
   before_action :check_manage_permissions, only: %i(create destroy)
 
   def create
diff --git a/app/javascript/vue/protocol/mixins/components/delete.js b/app/javascript/vue/protocol/mixins/components/delete.js
index 554277ffd..735a0eeae 100644
--- a/app/javascript/vue/protocol/mixins/components/delete.js
+++ b/app/javascript/vue/protocol/mixins/components/delete.js
@@ -1,11 +1,15 @@
 export default {
+  data() {
+    return {
+      confirmingDelete: false
+    };
+  },
   methods: {
     showDeleteModal() {
-      $('#modalDestroyProtocolContent').modal('show');
-      $('#modalDestroyProtocolContent .delete-step').off().one('click', () => {
-        this.deleteComponent();
-        $('#modalDestroyProtocolContent').modal('hide');
-      });
+      this.confirmingDelete = true;
+    },
+    closeDeleteModal() {
+      this.confirmingDelete = false;
     },
     deleteComponent() {
       $.ajax({
diff --git a/app/javascript/vue/protocol/modals.vue b/app/javascript/vue/protocol/modals.vue
index 14b237a53..0d5339491 100644
--- a/app/javascript/vue/protocol/modals.vue
+++ b/app/javascript/vue/protocol/modals.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="protocol-modals">
-    <deleteComponentModal/>
   </div>
 </template>
 <script>
diff --git a/app/javascript/vue/protocol/modals/delete_component.vue b/app/javascript/vue/protocol/modals/delete_component.vue
index 7de8c59ef..93e99068b 100644
--- a/app/javascript/vue/protocol/modals/delete_component.vue
+++ b/app/javascript/vue/protocol/modals/delete_component.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="modal" id="modalDestroyProtocolContent" tabindex="-1" role="dialog">
+  <div ref="modal" class="modal" id="modalDestroyProtocolContent" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
@@ -14,8 +14,8 @@
 
         </div>
         <div class="modal-footer">
-          <button class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button class="btn btn-danger delete-step">Delete forever</button>
+          <button class="btn btn-secondary" @click="cancel">{{ i18n.t('general.cancel') }}</button>
+          <button class="btn btn-danger" @click="confirm">{{ i18n.t('protocols.steps.modals.delete_component.confirm')}}</button>
         </div>
       </div>
     </div>
@@ -23,6 +23,19 @@
 </template>
  <script>
   export default {
-    name: 'deleteComponentModal'
+    name: 'deleteComponentModal',
+    mounted() {
+      $(this.$refs.modal).modal('show');
+    },
+    methods: {
+      confirm() {
+        $(this.$refs.modal).modal('hide');
+        this.$emit('confirm');
+      },
+      cancel() {
+        $(this.$refs.modal).modal('hide');
+        this.$emit('cancel');
+      }
+    }
   }
 </script>
diff --git a/app/javascript/vue/protocol/step.vue b/app/javascript/vue/protocol/step.vue
index b211489b5..a09071b91 100644
--- a/app/javascript/vue/protocol/step.vue
+++ b/app/javascript/vue/protocol/step.vue
@@ -109,10 +109,10 @@
       },
       changeState() {
         this.step.attributes.completed = !this.step.attributes.completed;
-        this.$emit('step:update', this.step)
+        this.$emit('step:update', this.step.attributes)
         $.post(this.step.attributes.urls.state_url, {completed: this.step.attributes.completed}).error(() => {
           this.step.attributes.completed = !this.step.attributes.completed;
-          this.$emit('step:update', this.step)
+          this.$emit('step:update', this.step.attributes)
           HelperModule.flashAlertMsg(this.i18n.t('errors.general'), 'danger');
         })
       },
diff --git a/app/javascript/vue/protocol/step_components/checklist.vue b/app/javascript/vue/protocol/step_components/checklist.vue
index 4f5591d4e..6ba347d92 100644
--- a/app/javascript/vue/protocol/step_components/checklist.vue
+++ b/app/javascript/vue/protocol/step_components/checklist.vue
@@ -4,13 +4,17 @@
    <button class="btn icon-btn btn-light" @click="showDeleteModal">
       <i class="fas fa-trash"></i>
     </button>
+    <deleteComponentModal v-if="confirmingDelete" @confirm="deleteComponent" @cancel="closeDeleteModal"/>
   </div>
 </template>
 
  <script>
   import DeleteMixin from 'vue/protocol/mixins/components/delete.js'
+  import deleteComponentModal from 'vue/protocol/modals/delete_component.vue'
+
   export default {
     name: 'Checklist',
+    components: { deleteComponentModal },
     mixins: [DeleteMixin],
     props: {
       element: {
diff --git a/app/javascript/vue/protocol/step_components/table.vue b/app/javascript/vue/protocol/step_components/table.vue
index 1c3e2cf17..23e856103 100644
--- a/app/javascript/vue/protocol/step_components/table.vue
+++ b/app/javascript/vue/protocol/step_components/table.vue
@@ -4,13 +4,17 @@
     <button class="btn icon-btn btn-light" @click="showDeleteModal">
       <i class="fas fa-trash"></i>
     </button>
+    <deleteComponentModal v-if="confirmingDelete" @confirm="deleteComponent" @cancel="closeDeleteModal"/>
   </div>
 </template>
 
  <script>
   import DeleteMixin from 'vue/protocol/mixins/components/delete.js'
+  import deleteComponentModal from 'vue/protocol/modals/delete_component.vue'
+
   export default {
     name: 'StepTable',
+    components: { deleteComponentModal },
     mixins: [DeleteMixin],
     props: {
       element: {
diff --git a/app/javascript/vue/protocol/step_components/text.vue b/app/javascript/vue/protocol/step_components/text.vue
index adbfee6b2..e224564ae 100644
--- a/app/javascript/vue/protocol/step_components/text.vue
+++ b/app/javascript/vue/protocol/step_components/text.vue
@@ -4,13 +4,17 @@
    <button class="btn icon-btn btn-light" @click="showDeleteModal">
       <i class="fas fa-trash"></i>
     </button>
+    <deleteComponentModal v-if="confirmingDelete" @confirm="deleteComponent" @cancel="closeDeleteModal"/>
   </div>
 </template>
 
  <script>
   import DeleteMixin from 'vue/protocol/mixins/components/delete.js'
+  import deleteComponentModal from 'vue/protocol/modals/delete_component.vue'
+
   export default {
     name: 'StepText',
+    components: { deleteComponentModal },
     mixins: [DeleteMixin],
     props: {
       element: {
diff --git a/app/serializers/checklist_serializer.rb b/app/serializers/checklist_serializer.rb
index 895c4841e..c2e86256c 100644
--- a/app/serializers/checklist_serializer.rb
+++ b/app/serializers/checklist_serializer.rb
@@ -6,7 +6,7 @@ class ChecklistSerializer < ActiveModel::Serializer
   attributes :name, :urls
 
   def urls
-    return unless object.step
+    return if object.destroyed?
 
     {
       delete_url: step_checklist_path(object.step, object)
diff --git a/app/serializers/step_table_serializer.rb b/app/serializers/step_table_serializer.rb
index 482e6ba80..c5bc82633 100644
--- a/app/serializers/step_table_serializer.rb
+++ b/app/serializers/step_table_serializer.rb
@@ -6,7 +6,9 @@ class StepTableSerializer < ActiveModel::Serializer
   attributes :name, :urls
 
   def urls
-    return unless object.step
+    return if object.destroyed?
+
+    object.reload unless object.step
 
     {
       delete_url: step_table_path(object.step, object)
diff --git a/app/serializers/step_text_serializer.rb b/app/serializers/step_text_serializer.rb
index 5ed5d9f4e..8cf37ee02 100644
--- a/app/serializers/step_text_serializer.rb
+++ b/app/serializers/step_text_serializer.rb
@@ -6,7 +6,7 @@ class StepTextSerializer < ActiveModel::Serializer
   attributes :text, :urls
 
   def urls
-    return unless object.step
+    return if object.destroyed?
 
     {
       delete_url: step_text_path(object.step, object)
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 2974b0df4..f463b7537 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2528,6 +2528,7 @@ en:
           title: 'Delete content'
           description_1: 'You’re about to delete a content block from your protocol. It might contain data you don’t want to lose. You won’t be able to get it back.'
           description_2: 'Are you sure you want to delete it?'
+          confirm: 'Delete forever'
       options:
         up_arrow_title: "Move step up"
         down_arrow_title: "Move step down"