AWS Amplify GraphQL API in Vue App Returns Null

Question

I am using AWS-Amplify for generating GraphQL back-end in a simple Vue2 Task Management application for practice.

I have configured my application correctly to use amplify-vue components. All looks fine as there are no errors. I have generated correct schema using AppSync console, and have created mutations and queries for CRUD demo as shown below.

Schema

type Mutation {
    createTask(input: TaskInput): Task
    updateTask(id: ID!, input: TaskInput): Task
    deleteTask(id: ID!): Task
}

type Query {
    fetchTask(id: ID): Task
}

type Task {
    id: ID!
    name: String!
    completed: Boolean!
}

input TaskInput {
    name: String!
    completed: Boolean!
}

Query

query listTasks {
  listTasks {
    items {
      id
      name
      completed
    }
  }
}

Mutations

mutation addTask($name: String!, $completed: Boolean!) {
  createTask(
    input: {
      name: $name,
      completed: $completed
    }
  ) {
    name
    completed
  }
}


mutation updateTask($id: ID!, $name: String!, $completed: Boolean!) {
  updateTask(
    input: {
      id: $id
      name: $name
      completed: $completed
    }
  ) {
    id
    name
    completed
  }
}

mutation deleteTask($id: ID!) {
  deleteTask(
    input: {
      id: $id
    }
  ) {
    id
  }
}

To start off with my application, I create new task but get error in console:

Variable 'name' has coerced Null value for NonNull type 'String!'

Then I check in AppSync Console by running the following createTask mutation:

mutation {
    createTask(
    input: {
      name: "Waleed",
      completed: false
    }
  ) {
    name
    completed
  }
}

And this time the following response gets returned:

{
  "data": {
    "createTask": null
  }
} 

Can someone please help me out what I am doing wrong here?

Thank you