Syntax Error: let is disallowed as a lexically bound name

Question

I am using vue.js and getting this error "Uncaught SyntaxError: let is disallowed as a lexically bound name". When I debug it shows a blank screen and this error in the console.

I have Googled but nothing helpful was found.

Here is my Vue code:

    let Task = {
      props: ['task'],
      template: `
       <div>
        <div class="tasks">
          {{ task.body }}

        </div>
       </div>
    `

    },

     let Tasks = {
       components:{
         'task': Task
       },

       data: {
         return {
           tasks: [
            {id: 1, body: 'Task One', done: false }
           ],
         }
       },

       template: `
        <div>
       <task></task>
           <form action="">
             form
           </form>
      </div>
      `
     },

      let app = new Vue({
        el:'#app',
        components: {
         'tasks': Tasks
         'task': Task
       }
     })

Answer 1

If you are separating your declarations with commas, you should not repeat let. either remove let from each declaration, or use semi-colons instead.

Example:

let a = {}, b = 5, c = function(){}; // OK
let a = {}; let b = 5; // OK
let a = {}, let b = 5; //Not OK -- error